How to remove the border of the MUI select component?

user_9843082 0
Viewed 6968

I want to customize the MUI Select component. Basically I just want to remove the border or rather the outline. I tried to override the styles, tried to use a NativeSelect and tried to use a customized InputBase with the Select as inputComponent but none of this worked. Any help would be much appreciated.

material-ui reactjs
3 Answers
user_158656110

I followed @Bar's answer: in my case I also had to reset the box-shadow applied over the Select.

For Material v5,

<Select sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>

screenshot of a MUI select without borders

user_14194020

MUI exposes the disableUnderline prop in Select component. Just set it to true

user_57147260
Related