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

Question

处理使用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不是一种选择.

Answer 1

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

在您的组件中：

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

在你的CSS中：

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