Question

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

我在凸起按钮源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组件提供RaisedButton道具并使用:hover指令在css中指定!important属性来解决此问题。

在您的组件中：

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

在你的css中：

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

Answer 2

我使用window.eventlistener来点击事件以覆盖我的叠加层

window.addEventListener("load",addClickHandlers,false);
function addClickHandlers(event) {
var someElement = document.getElementById("an_id");
someElement.addEventListener("click",myClickHandler,false);
}

function myClickHandler(event) {
... do stuff ...
}

Answer 3

对于凸起的按钮使用此prop hoverColor，因此它将类似于

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

Answer 4

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

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

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

不幸的是，看起来键盘焦点事件没有在MaterialUI API中暴露出一个钩子，因此您无法在不修改库的情况下处理该案例。

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

Answer 5

相当简单的解决方案：

.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>

Answer 6

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

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

'#test表示id，。test表示您尝试操作的元素的类。

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

6 个答案: