Material UI Raised Button 在悬停时改变颜色答案

【问题标题】：Material UI Raised Button change color on hoverMaterial UI Raised Button 在悬停时改变颜色
【发布时间】：2018-03-26 10:36:53
【问题描述】：

我需要在 Material UI 中更改悬停时的凸起按钮背景颜色。试过了还是不行，有没有办法改变材质UI中的背景颜色，凸起的按钮？

Example.JS

<RaisedButton 
        className="bouton"
        secondary={false}
        label="CONNEXION"
        fullWidth={true}
        labelPosition="before"
        icon={<img src="../../images/next.png" />}
        onTouchTap={() => signinWithEmailAndPassword(document.getElementById('Email').value, document.getElementById('password').value)}
        />

示例.css

    .bouton{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #00BCD4;
}

    .bouton:hover{
        background-color: #00BCD4;
        color: #FFF;
    }

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

如果你没有设置图片作为背景你可以改变颜色宽度background-color，但是你需要计算选择器的权重。

下一个代码用于检查您的按钮。

.button {
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #00BCD4 !important;
}

.button:hover {
   background-color: green !important;
   color: #FFF;
}

!important 为选择器设置最大权重，这个没有使用除了检查样式。

如果您的按钮更改颜色集类，以便选择器的权重与当前选择器一样好

【讨论】：