覆盖材质-UI选择样式

Question

我试图覆盖<Select>时Material-UI的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}

---