How to remove the border of the MUI select component?

Question

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.

Answer 1

The border is applied to the label of the OutlinedInput component. Edit the css rule notchedOutline of the OutlinedInput component to remove the border. https://mui.com/api/outlined-input/#css

Answer 2

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

Answer 3

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 4

What worked for me was to use

• disableUnderline to remove the line below the selector
• variant="standard" to get rid of borders, both when the selector is focused or not.

Setting '.MuiOutlinedInput-notchedOutline': { border: 0 } will only remove borders of a selector when not focused.