CODEWITHSUNDEEP
reactjsmaterial-ui
user14872626
user14872626

Reputation:

how to remove the underline of material-ui select?

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 :)

Upvotes: 22

Views: 22427

Answers (2)

Ericgit
Ericgit

Reputation: 7103

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

Upvotes: 19

Ryan Cogswell
Ryan Cogswell

Reputation: 81136

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:

Upvotes: 34

Related Questions