How to remove the border of the Material UI Select component?

Question

I want to customize the Material UI 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.

Answer 1

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 } }}>

Answer 2

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