Javascript 是否可以为凸起的按钮添加自定义悬停颜色？

在一个使用MaterialUI组件库的项目中，我得到了一个自定义按钮悬停颜色的请求，该颜色超出了MUI主题的正常约定

我在凸起的按钮源代码中找到了这段相关的代码。设置自定义labelColor确实会更改悬停状态，但这仍然不能满足我当前的需要，即按钮悬停颜色与标签颜色不同

overlay: {
  height: buttonHeight,
  borderRadius: borderRadius,
  backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
    fade(labelColor, amount),
  transition: transitions.easeOut(),
  top: 0,
},

是否有其他方法覆盖覆盖背景颜色，以便我可以使用单独的自定义颜色

---

为了澄清这一点，我希望使用内嵌样式或通过覆盖按钮上的道具来实现。附加一个类并使用外部CSS不是一个选项。

我可以通过给

RaisedButton

组件一个

类名
道具并指定
：用
在CSS中悬停
属性来解决这个问题！重要信息
指令

在您的组件中：

...
<RaisedButton className="my-button" />
...

您可以使用jquery简单地删除类和addClass

jQuery(document).ready(function($){
  $('#test').hover(
     function(){ $(this).addClass('redclass') },
     function(){ $(this).removeClass('overlay') }
   )
 });

“#test表示id，test表示您试图操作的元素的类。
对于凸起的按钮，请使用此颜色，使其类似

<RaisedButton 
   label="Default" 
   hoverColor={"#00ff00"} 
/>

在RaisedButton的render函数中，
overlay
样式对象被
overlayStyle
属性覆盖。（相关摘录如下）


{enhancedButtonChildren}

这意味着您可以通过设置
overlystyle
道具的
backgroundColor
来设置背景色。我认为第二个难题是设置
onMouseLeave
和
onmouseCenter
事件，并通过在鼠标进入或离开按钮区域时更改颜色，自行管理当前背景颜色

不幸的是，键盘焦点事件似乎在MaterialUI API中没有公开挂钩，因此如果不修改库，您将无法处理这种情况

如果您选择修改库，那么向MaterialUI提交拉取请求可能是值得的。
相当简单的解决方案：

.yourButtonClass{
  color: aColor !important;
  &>span{
    color: anotherColor;
  }
}

将颜色应用于更改标签和覆盖颜色的按钮，然后将标签放置在指定文本颜色的范围内。
这样，您的背景、标签和覆盖可以是不同的颜色：）

也可以写入各个标记的样式属性中：

<md-button class="md-raised" style="color: aColor !important">
    <span style="color: anotherColor">yourLabel</span>
</md-button>


你的标签
感谢您抽出时间回复。我已经对我的原始问题进行了编辑，以澄清我试图解决问题的方法。我相信这种方法在技术上是可行的，但我正在尝试使用与项目其余部分相同的约定来实现这一点，即内联设置样式或覆盖组件上的道具。我最近使用了材质ui，我们无法从单个点更改样式。有时我们用自定义主题覆盖它们，有时我们使用内联样式，在最后一个选项中我们使用这种方法。当涉及到改变样式时，材质ui不是那么灵活。当你说“不能满足我当前的需求”时，你能澄清一下你的需求是什么吗？标签颜色和鼠标悬停颜色需要不同吗？是的，标签颜色需要不同于鼠标悬停上的按钮背景颜色。jQuery和React不能很好地混合。
.yourButtonClass{
  color: aColor !important;
  &>span{
    color: anotherColor;
  }
}

<md-button class="md-raised" style="color: aColor !important">
    <span style="color: anotherColor">yourLabel</span>
</md-button>