悬停样式上的Material-UI [v0.x] RaisedButton

Question

我想在悬停时更改Material-UI RaisedButton的样式,但似乎没有特定的选项可以做到这一点,因为悬停时发生的事情是由材料设计指南定义的.

然而,有什么方法可以在悬停在按钮上时更改按钮的样式(主要是颜色和背景颜色)吗？

我看到m-ui为它们的按钮使用了很多不同的层,并且当前在按钮顶部添加了一个白色透明背景,以便它可以很好地适应所有主题颜色.

(更确切地说,我想反转颜色和背景颜色之间的颜色.)

Answer 1

对不起,迟到的答案,但也许这将有助于其他人.Material-ui支持这样的媒体查询(至少1.0):

const styles = {
  button: {
    padding: '10px',
    '&:hover': {
      background: 'blue'
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      padding: '20px'
    }
  }
}

这个例子和更多可以从Mark Dalgleish的关于统一样式语言的帖子中找到.

Answer 2

您必须使用 CSS 和一些 hackery，但下面是一个包装它的小组件。

https://jsfiddle.net/0gjs8bh3/3/

const InvertHoverButton = ({ id, backgroundColor, labelColor }) => {
  // cubic-bezier(0.23, 1, 0.32, 1)
  const transition = `background-color 450ms ${MaterialUI.transitions.easeOutFunction} 0ms`;

    return (
    <div style={{ display: 'inline-block' }}>
        <style>
          {`
          #${id}:hover {
            transition: ${transition} !important;
            background-color: ${labelColor} !important;
            color: ${backgroundColor} !important;
          }

          #${id} {
            transition: ${transition} !important;
            background-color: ${backgroundColor} !important;
            color: ${labelColor} !important;
          }      
          `}
        </style>
        <RaisedButton id={id} backgroundColor={labelColor} labelColor={backgroundColor} className="test">Fiddle!</RaisedButton>
      </div>  
  );
};

例子：

// Must set id, backgroundColor and labelColor
<InvertHoverButton id="myButton" backgroundColor="red" labelColor="white">Fiddle!</InvertHoverButton>

您可以选择在这里以不同的方式执行 CSS，但我只是想在这里为您封装它，以使其更容易测试。如果您选择以不同的方式实现这一点，那么关键点是：

1）您需要:hover在<button>RaishedButton渲染的元素上使用CSS

2) 您必须使用RaisedButton已经反转的颜色来初始化 's 属性（这是因为material-ui 使用标签颜色来确定悬停叠加和波纹颜色）。使用 CSS 来“修复”未 :hover'ing 时交换的颜色。

3）您需要匹配material-ui在按钮标签上使用的过渡，否则它不会正确动画

注意：如果您使用material-ui的自定义主题，您可以修改此组件以使用raisedButton主题的主要/次要颜色，而不是接受自定义颜色。