I am trying to override the styling applied by Material-UI's <Select> ponent when variant="outlined". For this example, I want the <Select>'s dropdown icon to be hidden and padding-right to be 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:

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):

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.

Here is the CodeSandbox:

I am trying to override the styling applied by Material-UI's <Select> ponent when variant="outlined". For this example, I want the <Select>'s dropdown icon to be hidden and padding-right to be 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:

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):

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.

Here is the CodeSandbox: https://codesandbox.io/s/overwrite-select-style-zqk1r

• javascript
• css
• reactjs
• material-ui

1 Answer 1

You can use nesting selector for the className MuiSelect-outlined

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

Notice that use className here:

className={classes.hideIconPadding}