css - Reactjs 和 Material UI 上的悬停功能

Question

我正在使用 reactjs 和 material ui，我无法更改多个组件中选定元素的背景颜色，例如在 SelectField 中。

<SelectField
   floatingLabelText="Choose a sport"
   value={this.state.value}
   onChange={this.handleChange.bind(this)}
   menuStyle={{color:'red'}}
   menuItemStyle={{color:'black', borderBottom:'1px solid white'}}
   listStyle={{backgroundColor:'rgb(0, 188, 212)'}}
   labelStyle={{color:'black'}}

但我不知道如何添加悬停功能或更改所选元素的颜色。

有这方面的经验吗？

谢谢!

Answer 1

Material-UI 使用 JSS用于编译样式。您可以在 Material-UI 的 documentation 中看到更多相关信息。 .

CSS 选择器是作为另一个属性完成的，所以你可以只使用 &:hover

button: {
  fontSize: 12,
  '&:hover': {
    background: 'blue'
  }
},