是否可以为凸起按钮添加自定义悬停颜色？ [英] Is it possible to add a custom hover color to Raised Buttons?

问题描述

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

Working on a project that is using the Material-UI library of components and I've gotten a request for a custom button hover color that is outside of the normal convention of the MUI theme.

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

I found this relevant block of code in the Raised Button source, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Setting a custom labelColor does change the hover state, but that still does not satisfy my current need to have the button hover color something different than that of the label color.

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

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

Is there a way to override the overlay background color some other way so that I can use a separate custom color?

澄清我希望使用内联样式或通过覆盖按钮上的道具来实现此目的。附加一个类并使用外部CSS不是一种选择。

To clarify I'm looking to do this using inline styling or through overriding a prop on the button. Appending a class and using external CSS is not an option.

推荐答案

我能够通过给出<$ c $来解决它c> className 支持 RaisedButton 组件并使用<$在css中指定：hover 属性c $ c>！important 指令。

I was able to solve it by giving a className prop to RaisedButton component and specifying :hover attribute in css with !important directive.

在您的组件中：

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

在你的css中：

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

这篇关于是否可以为凸起按钮添加自定义悬停颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！