覆盖 Material-UI 选择样式

Question

我正在尝试覆盖 Material-UI<Select>组件应用的样式，当variant="outlined". 对于这个例子，我希望<Select>的下拉图标被隐藏并且padding-right是0px.

根据我对API 的理解，我应该能够通过传入来覆盖样式classes={{ icon: classes.hideIcon, outlined: classes.noPaddingRight }}，其中classes是：

const useStyles = makeStyles(theme => ({
  hideIcon: {
    display: "none"
  },
  noPaddingRight: {
    paddingRight: "0px"
  }
}));
const classes = useStyles();

我能够成功地隐藏图标，但我的noPaddingRight阶级是由两个覆盖MuiSelect-select.MuiSelect-select和MuiSelect-outlined.MuiSelect-outlined（我也搞不清楚什么.是这两个类中做的）：

我让它工作的唯一方法是使用，paddingRight: 0px !important但如果可能的话，这是我想避免的。

这是 CodeSandbox：https ://codesandbox.io/s/overwrite-select-style-zqk1r

Answer 1

您可以为 className MuiSelect-outlined使用嵌套选择器

hideIconPadding: {
  "& .MuiSelect-outlined": {
    paddingRight: "0px"
  }
}

注意className这里使用：

className={classes.hideIconPadding}