reactjsmaterial-ui

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

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.

Solution

  • 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