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

IT技术 javascript reactjs material-ui
2021-05-18 14:07:23

正在处理一个使用 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,
},

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

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

4个回答

我能够通过className为RaisedButton组件提供一个props并:hover在带有!important指令的css 中指定属性来解决它。

在您的组件中：

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

在你的 css 中：

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

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

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

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

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

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

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

如果您走修改库的路线，这可能值得向 MaterialUI 提交拉取请求。

相当简单的解决方案： 

.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>
其它你可能感兴趣的问题
上一篇TypeScript 中的“EventTarget”上不存在属性“value” 下一篇通过 React Router 传递函数