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

【问题标题】：Is it possible to add a custom hover color to Raised Buttons?是否可以为凸起按钮添加自定义悬停颜色？
【发布时间】：2017-05-31 01:06:03
【问题描述】：

正在处理一个使用 Material-UI 组件库的项目，我收到了一个自定义按钮悬停颜色的请求，该颜色超出了 MUI 主题的常规约定。

我在 Raised Button 源代码https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98 中找到了这个相关的代码块。设置自定义 labelColor 确实会改变悬停状态，但这仍然不能满足我目前需要让按钮悬停颜色与标签颜色不同。

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

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

为了澄清我希望使用内联样式或通过覆盖按钮上的道具来做到这一点。附加一个类并使用外部 CSS 不是一种选择。

【问题讨论】：

当你说“不满足我目前的需求”时，你能澄清一下你的需求是什么吗？您需要将标签颜色和悬停颜色设置为不同的颜色吗？
是的，标签颜色需要与悬停时的按钮背景颜色不同。

标签： javascript reactjs material-ui

【解决方案1】：

我能够通过给RaisedButton 组件提供一个className 属性并使用!important 指令在css 中指定:hover 属性来解决它。

在您的组件中：

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

在你的 CSS 中：

.my-button :hover {
  background-color: blue !important;
}

【讨论】：

感谢您抽出宝贵时间回复。我对我的原始问题进行了编辑，以阐明我试图解决问题的方法。我相信这种方法在技术上可行，但我正在尝试使用与项目其余部分相同的约定来实现这一点，即设置内联样式或覆盖组件上的道具。
我最近使用了 material-ui，我们无法从一个点更改样式。有时我们用自定义主题覆盖它们，有时我们使用内联样式，在最后一个选项中我们使用了这种方法。在更改样式方面，Material ui 不是那么灵活。

【解决方案2】：

对于凸起的按钮，使用这个道具 hoverColor 所以它会像

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

【讨论】：

【解决方案3】：

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

<div
  ref="overlay"
  style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
>
  {enhancedButtonChildren}
</div>

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

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

如果您采用修改库的方式，这可能值得向 MaterialUI 提交拉取请求。

【讨论】：

【解决方案4】：

相当简单的解决方案：

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

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

也可以写在各自标签的style属性中：

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

【讨论】：

【解决方案5】：

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

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

'#test 代表 id，.test 代表你要操作的元素的类。

【讨论】：

jQuery 和 React 不能很好地混合。