我正在使用 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'}}
但我不知道如何添加悬停功能或更改所选项目的颜色。
有这方面的经验吗？
谢谢！
如果要在组件中悬停，可以使用 css 样式：
<div>
<style>
{`
.menuItem:hover {
background-color: red !important;
}
.menuItem {
background-color: transparent !important;
}
`}
</style>
<MuiThemeProvider>
<SelectField
id="field"
floatingLabelText="Choose a sport"
menuStyle={{ color: 'red' }}
menuItemStyle={{ color: 'black', borderBottom: '1px solid white' }}
listStyle={{ backgroundColor: 'rgb(0, 188, 212)' }}
labelStyle={{ color: 'black' }} >
<MenuItem className="menuItem" value={1} primaryText="Never" />
<MenuItem className="menuItem" value={2} primaryText="Every Night" />
<MenuItem className="menuItem" value={3} primaryText="Weeknights" />
<MenuItem className="menuItem" value={4} primaryText="Weekends" />
<MenuItem className="menuItem" value={5} primaryText="Weekly" />
</SelectField>
</MuiThemeProvider>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句