Material-UI Input component underline color

Question

I am trying to make an input component that has a white underline. Currently, when the user hovers over the component, the underline color changes to black. I would expect this be white. I believe this should be possible by overriding the underline class as in the demo and outlined below. Unfortunately, it doesn't seem to work, but if I inspect the styles manually in the browser and remove the below line it works as expected in the browser.

Example: https://stackblitz.com/edit/yjpf5s (View: https://yjpf5s.stackblitz.io)

Style removed manually in browser to obtain desired functionality:

.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
  border-bottom: 2px solid rgba(0, 0, 0, 0.87);

The overide class style I am using:

underline: {

        color: palette.common.white,
        borderBottom: palette.common.white,
        '&:after': {
            borderBottom: `2px solid ${palette.common.white}`,          
        },              
        '&:focused::after': {
            borderBottom: `2px solid ${palette.common.white}`,
        },              
        '&:error::after': {
            borderBottom: `2px solid ${palette.common.white}`,
        },                      
        '&:before': {
            borderBottom: `1px solid ${palette.common.white}`,          
        },
        '&:hover:not($disabled):not($focused):not($error):before': {
            borderBottom: `2px solid ${palette.common.white}`,
        },
        '&$disabled:before': {
            borderBottom: `1px dotted ${palette.common.white}`,
        },              
    },

Edit: Here is the solution that ended up working:

'&:hover:not($disabled):not($focused):not($error):before': {
    borderBottom: `2px solid ${palette.common.white} !important`,
},

score 11 · Answer 1 · answered Jun 13 '18 at 15:10

I took a look at the source code and they are doing something like this

{
   focused: {},
   disabled: {},
   error: {},
   underline: {
    '&:before': {
        borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
    },
    '&:after': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    },
    '&:hover:not($disabled):not($focused):not($error):before': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    }
}

It works for me.

Thank you! It's unfortunate that simply :hover doesn't work. — Martin Konicek, Jan 16 '20 at 16:06

score 11 · Answer 2 · answered Jan 16 '20 at 16:09

Inspired by Guillaume's answer, here is my working code, simplified if you don't care about error state:

const WhiteTextField = withStyles({
  root: {
    '& .MuiInputBase-input': {
      color: '#fff', // Text color
    },
    '& .MuiInput-underline:before': {
      borderBottomColor: '#fff8', // Semi-transparent underline
    },
    '& .MuiInput-underline:hover:before': {
      borderBottomColor: '#fff', // Solid underline on hover
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: '#fff', // Solid underline on focus
    },
  },
})(TextField);

Use:

<WhiteTextField
  fullWidth
  onChange={this.handleNameChange}
  value={this.props.name}
/>

Finally found the right answer why 0 upvotes though – Steve Moretz Jun 10 '20 at 20:20 — Steve Moretz, Jun 10 '20 at 20:20

score 0 · Answer 3 · answered Jul 05 '20 at 12:16

At first, add your input like this

<Input {...props} className='myClass' />

Now in your CSS

.gc-input-bottom::after{
    border-bottom: 2px solid $input-border-color-active!important;
    :hover{
        border-bottom: none!important;
    }
}

.gc-input-bottom::before{
    border-bottom: 1px solid $input-border-bottom-color!important;
}

Here before will give you the always visible underline access and after will give you the after click underline access. Now just do what you want

score 0 · Answer 4 · answered Mar 22 '23 at 05:40

In the current version of MUI as of March 2023, the correct way to do this for an type component is:

            <Input
              sx={{ color: "#D8D8D8", ':before': { borderBottomColor: '#808080 !important' }, ':hover:before': { borderBottomColor: 'red !important' }, ':after': { borderBottomColor: 'red !important' }}}
              id="username-input"
              onKeyDown={keyPressedHandler}
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                setValues({ ...values, username: event.target.value });
              }}
            />

This example assumes that the input component is for a username entry. I added !important everywhere to force the issue. I noticed that the ':hover:before' will not work without the !important tag. The others may work without it.

score -3 · Accepted Answer · edited Oct 12 '19 at 03:07

-3

try like this

.MuiInput-underline-24:hover:not(.MuiInput-disabled-23):not(.MuiInput-focused-22):not(.MuiInput-error-25):before {
    border-bottom: 2px solid rgb(255, 255, 255) !important;
}

edited Oct 12 '19 at 03:07

Quill

2,729
1
33
44

answered Jun 06 '18 at 11:46

Hardik Prajapati

162
6

I tried adding !important but it didn't seem to change anything – Chris Jun 06 '18 at 13:06
copy this class and pest in your css – Hardik Prajapati Jun 06 '18 at 13:11
See Index.html in – Hardik Prajapati Jun 06 '18 at 13:24
After trying again, adding !important seems to work. – Chris Jun 06 '18 at 16:49

Material-UI Input component underline color

5 Answers5