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

Question

我想在悬停时更改 Material-UI RaisedButton 的样式，但似乎没有具体的选项可以做到这一点，因为悬停时发生的事情有点由 material 设计定义 guidelines.

尽管如此，有什么方法可以在将鼠标悬停在按钮上时更改按钮的样式（主要是颜色和背景颜色）？

我看到 m-ui 为他们的按钮使用了很多不同的层，目前在按钮顶部添加了白色透明背景，以便它在所有主题颜色下都能很好地表现。

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

Answer 1

试试这个，你可以在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;

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

1) 您需要在 RaisedButton 呈现的 <button> 元素上使用 CSS :hover

2) 你必须初始化 RaisedButton 的属性已经反转颜色（这是因为 material-ui 使用标签颜色来确定悬停叠加和波纹颜色).使用你的 CSS 到 'fix' 交换的颜色，而不是 :hover'ing。

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

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

Answer 3

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

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

此示例及更多内容可在 Mark Dalgleish's post about unified styling language.

中找到

Answer 4

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

有时 'hover' 样式即使您应用了也没有应用。你可以使用 '!important' 来实现。

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

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

Material-UI [v0.x] RaisedButton on hover styles

css

reactjs

material-ui