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

Question

我想在Material-UI RaisedButton鼠标悬停时更改样式，但好像没有特定的选项来实现，因为鼠标悬停时发生的事情在一定程度上是由材料设计指南定义的。

不过，有没有办法在悬停在按钮上时更改按钮的样式（主要是颜色和背景颜色）？

我看到m-ui为其按钮使用了许多不同的层，并且当前在按钮顶部添加了一个白色透明背景，以便其与所有主题颜色配合使用。

（更精确地说，我想反转颜色和背景颜色之间的颜色。）

- Florian Bienefelt

---

RaisedButton已被弃用，如果您正在使用较新版本的Button，请参阅此问题。 - NearHuscarl

Answer 1

抱歉回答晚了，但也许这会帮助其他人。Material-ui支持媒体查询，像这样（至少在1.0版本中）：

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

这个例子以及更多内容可以在Mark Dalgleish关于统一样式语言的文章中找到。

- Ville Venäläinen

Answer 2

 linkLabel:{
    fontSize: 14,
    color: '#2bd5c6',
    '&:hover': {
      color: '#2bd5c6 !important',
    }
  }

有时候即使你已经应用了“hover”样式，但它可能不会生效。你可以使用“!important”来实现。

<a href="#" className={classes.linkLabel}> {'Link content'}</a>

- GURU PRASAD

Answer 3

只需尝试一下，你就可以在ReactJS中创建className，这样你就可以实现悬停样式。

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}
      <button className="intro">Save</button>
    </Style>
  }
}

export default Intro;

- Karthick Nagarajan

Answer 4

你需要使用CSS和一些技巧，但下面是一个将其包装起来的小组件。

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，但我只是试图在SO上为您封装它，以使其更易于测试。如果您选择以不同的方式实现此操作，则关键点如下：

1）您需要在RaisedButton渲染的元素上使用CSS :hover。

2）您必须使用已经反转颜色的RaisedButton属性进行初始化（这是因为material-ui使用标签颜色来确定悬停覆盖和涟漪颜色）。使用您的CSS来在没有:hover时“修复”交换的颜色。

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

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

- Jeff McCloud

---

太棒了。虽然我花了2个小时尝试将其放入我的设置中，但我完全无法正确复制它。这是一个更新的fiddle：https://jsfiddle.net/0gjs8bh3/4/你知道为什么使用className而不是id不起作用吗？此外，您在此fiddle中使用的material-ui版本是多少？此fiddle上按钮的HTML树与我的设置不同。 - Florian Bienefelt

不确定是哪个版本，我从一个在网上找到的基本版本中fork了那个jsFiddle。关于id与className的问题...看起来material-ui在按钮元素上渲染id，但在其父div上渲染className。因此，如果您想使用className，只需稍微调整一下CSS选择器即可。更新您更新后的fiddle：https://jsfiddle.net/96618s4b/1/ - Jeff McCloud

最后..我没有在两个RaisedButton标签之间设置按钮标签，而是使用了组件的"label"属性，这种情况下你的方法存在颜色问题。你知道如何让它以这种方式工作吗（似乎这是规范的m-ui方法）？fiddle: https://jsfiddle.net/0gjs8bh3/6/ - Florian Bienefelt

相同的技巧，但现在您只需要特别为span样式文本颜色：https://jsfiddle.net/0gjs8bh3/7/ - Jeff McCloud