I have been attempting to customize the appearance of Material-UI's <Select> component with variant="outlined". In this particular scenario, my objective is to hide the dropdown icon and set padding-right to 0px.
Based on my interpretation of the API documentation, it seems like I should be able to override the default styles by providing
classes={{ icon: classes.hideIcon, outlined: classes.noPaddingRight }}classes is defined as follows:
const useStyles = makeStyles(theme => ({
hideIcon: {
display: "none"
},
noPaddingRight: {
paddingRight: "0px"
}
}));
const classes = useStyles();
Despite successfully hiding the icon, I'm facing issues with my noPaddingRight class being overridden by both
MuiSelect-select.MuiSelect-selectMuiSelect-outlined.MuiSelect-outlined. in those class names):
https://i.sstatic.net/13LWj.png
To address this problem, I resorted to using paddingRight: 0px !important which is not an ideal solution for me.
You can access the corresponding CodeSandbox via this link: https://codesandbox.io/s/overwrite-select-style-zqk1r