覆盖 Material-UI 选择样式答案

【问题标题】：Overriding Material-UI Select Style覆盖 Material-UI 选择样式
【发布时间】：2020-08-10 14:18:59
【问题描述】：

我试图在 variant="outlined" 时覆盖 Material-UI 的 <Select> 组件应用的样式。对于此示例，我希望隐藏 <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

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

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

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

注意这里使用className：

className={classes.hideIconPadding}

【讨论】：

成功了！谢谢你的帮助！我想我总是将嵌套选择器与应用伪类（悬停、焦点等）相关联。我没想过用它来定位其他嵌套的“正常”元素（以为我必须使用 classes 道具）。
谢谢@andyroo