Material UI凸起按钮悬停时更改颜色

Question

我需要在Material UI中更改Raised Button鼠标悬停时的背景颜色。试过以下方法但无效，有没有什么办法可以更改Material Ui中Raised Button的背景颜色？ Exemple.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)}
        />

Exemple.css

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

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

- Taieb

Answer 1

如果您没有将图像设置为背景，则可以使用background-color更改颜色，但是您需要计算选择器的权重。

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

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

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

!important将最大权重设置为选择器，但仅用于检查样式。

如果您的按钮更改颜色，请设置类，以便选择器的权重与当前选择器一样大。

- user3875721