[英]Overriding Material-UI Select Style
I am trying to override the styling applied by Material-UI's <Select>
component when variant="outlined"
.当
variant="outlined"
时,我试图覆盖 Material-UI 的<Select>
组件应用的样式。 For this example, I want the <Select>
's dropdown icon to be hidden and padding-right
to be 0px
.对于这个例子,我希望
<Select>
的下拉图标被隐藏并且padding-right
为0px
。
From my understanding of the API , I should be able to overwrite the styles by passing in classes={{ icon: classes.hideIcon, outlined: classes.noPaddingRight }}
, where classes
is:根据我对API的理解,我应该能够通过传入
classes={{ icon: classes.hideIcon, outlined: classes.noPaddingRight }}
来覆盖 styles,其中classes
是:
const useStyles = makeStyles(theme => ({
hideIcon: {
display: "none"
},
noPaddingRight: {
paddingRight: "0px"
}
}));
const classes = useStyles();
I am able to successfully hide the icon, but my noPaddingRight
class is overridden by both MuiSelect-select.MuiSelect-select
and MuiSelect-outlined.MuiSelect-outlined
(I'm also confused what the .
is doing in those two classes):我能够成功隐藏图标,但我的
noPaddingRight
class 被MuiSelect-select.MuiSelect-select
和MuiSelect-outlined.MuiSelect-outlined
覆盖(我也很困惑.
在这两个类中做了什么):
The only way I've gotten it to work is by using paddingRight: 0px !important
but that's something I'd like to avoid if at all possible.我让它工作的唯一方法是使用
paddingRight: 0px !important
但这是我想尽可能避免的事情。
Here is the CodeSandbox: https://codesandbox.io/s/overwrite-select-style-zqk1r这是 CodeSandbox: https://codesandbox.io/s/overwrite-select-style-zqk1r
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.