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's post about unified styling language找到此示例及更多示例。

Answer 2

    FirefoxOptions options = new FirefoxOptions();
    options.setCapability("marionette", false);
    options.setCapability("headless", false);

有时，即使您应用了“悬停”样式也不适用。您可以使用'！important'来实现。

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

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;

Answer 4

你必须使用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）您需要在RaisedButton呈现的:hover元素上使用CSS <button>

2）你必须使用已经倒置的颜色初始化RaisedButton道具（这是因为material-ui使用标签颜色来确定悬停叠加和波纹颜色）。使用您的CSS来修复＆＃39;当没有交换颜色时：悬停＆＃39>。

3）您需要匹配材料ui在按钮标签上使用的过渡，否则它无法正确制作动画

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

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

4 个答案: