如何覆盖选定的MenuItem样式? [英] How to override selected MenuItem style?
问题描述
我在项目中使用Material-ui-next Select组件.
I'm using the Material-ui-next Select component in a project.
大多数样式已使用classes
道具覆盖.但是,即使使用MuiThemeProvider
,selected
键也无法使用.
Most of the styles are being overriden using the classes
prop. But the selected
key can't get to work even using MuiThemeProvider
.
以下是代码的相关部分:
Here is the relevant parts of the code:
...
const theme = createMuiTheme({
overrides: {
MuiMenuItem: {
selected: {
backgroundColor: 'transparent',
}
}
}
});
...
class SelectMUI extends Component {
render() {
const {className, name} = this.props
return (
<MuiThemeProvider theme={theme}>
<Select
classes={{root: 'muisc-root', icon: 'muisc-icon', select: 'muisc-select', selectMenu: 'muisc-select-menu'}}
className={`mui-select-custom ${className}`}
endAdornment={<Caret className='mui-select-caret'/>}
MenuProps={{classes: {paper: 'muisc-menu-paper'}}}
{...this.props}
>
{this.props.children}
</Select>
</MuiThemeProvider>
)
} }
因此,正如您所看到的,当我将MenuItems作为道具导入时,我正在使用MuiThemeProvider
在项目中注入样式.
So, as you can see, while I'm importing the MenuItems as props, I'm using the MuiThemeProvider
to inject style in the items.
这是所选项目中应用样式的屏幕截图:
And here is a screenshot of the applied style in a selected item:
如何覆盖这个将来自同一元素的两个类组合在一起的选择器?
How to override this selector that is combining two classes from the same element?
推荐答案
好的,我知道了如何覆盖组合的选择器.解决方法如下:
ok, I figure it out how to override a combined selector. Here is the solution:
MuiMenuItem: {
root: {
background: 'transparent',
'&$selected': { // <-- mixing the two classes
backgroundColor: 'transparent'
}
}
}
这篇关于如何覆盖选定的MenuItem样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!