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`,
},

Answer 1

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.