Переопределение материала - выбор стиля пользовательского интерфейса

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();

I я могу успешно скрыть иконку, но мой noPaddingRight класс переопределяется как MuiSelect-select.MuiSelect-select, так и MuiSelect-outlined.MuiSelect-outlined (я также запутался, что . делает в этих двух классах):

Единственный способ заставить его работать - это использовать paddingRight: 0px !important, но я бы хотел этого избежать, если это вообще возможно.

Вот кодовый ящик: https://codesandbox.io/s/overwrite-select-style-zqk1r

Answer 1

Вы можете использовать селектор вложенности для className MuiSelect-outlined

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

Обратите внимание, что здесь используется className:

className={classes.hideIconPadding}

---