how to remove the underline of material-ui select?

Question

I need to remove the underline of Material UI Select list on hovering.

I tried https://codesandbox.io/s/nifty-rubin-6x9po?file=/src/Dropdown.jsx which removes the underline by default but when hovered, the underline still shown

i referred How to change Material UI input underline colour? and Removing underline style of autocomplete in react material ui component but both dealt with how to show, I entirely want to remove the underline from select list. Any help is appreciated, thanks :)

score 30 · Accepted Answer · answered Feb 25 '21 at 19:36

30

Add the disableUnderline prop to Select. Here's a modified version of your sandbox: https://codesandbox.io/s/disable-underline-xulxq?file=/src/Dropdown.jsx.

Related answers:

answered Feb 25 '21 at 19:36

Ryan Cogswell

75,046
9
218
198

1

This prop appears to have been removed from v5 documentation, although it still appears to work. I wonder what the suggested approach is for v5? – dmarr Oct 27 '21 at 16:08
@dmarr The props of the input are also supported. `disableUnderline` is one of the props for [Input](https://mui.com/api/input/). – Ryan Cogswell Oct 27 '21 at 16:19

score 15 · Answer 2 · answered Jun 23 '21 at 10:31

15

just add the disableUnderline prop to select component, you will no longer see the border-bottom:

<Select
    labelId='demo-simple-select-label'
    id='demo-simple-select'
    value={user.status}
    classes={{
        root: classes.selectControl,
        icon: classes.arrowDownIcon,
    }}
    disableUnderline
> 
   ...
</Select>;

answered Jun 23 '21 at 10:31

Ericgit

6,089
2
42
53

This is just a duplicate of accepted answer – Jan 28 '22 at 20:15

how to remove the underline of material-ui select?

2 Answers2