Material-ui: Override hover and before effects

[oowowaee]

I'm trying to accomplish this:
https://material-ui-1dab0.firebaseapp.com/customization/overrides/#overriding-with-classes

Specifically, I don't like the hover color on the :before for the TextField. I would also like to change the animation transition for the :after on the inkbar.

I have tried the following:

overridesUnderline: {
    '&:hover:before': {
      backgroundColor: 'rgba(0, 0, 0, 0.42)'
    }
  },

<Input classes={{underline: this.classes.overridesUnderline}}

This doesn't work, as the original style is still much more specific:

.MuiInput-underline-168:hover:not(.MuiInput-disabled-166):before {
    height: 2px;
    background-color: rgba(0, 0, 0, 0.87);
}

How are we supposed to be able to handle these cases?

[oliviertassinari]

How are we supposed to be able to handle these cases?

You are supposed to increase the specificity in order to match Material-UI one.

We could have been writing the internal style in order to avoid the not() but that would have required changing the disabled style, increasing the CSS payload and making disabled style override harder.

- '&:hover:not($disabled):before': {
+ '&:hover:before': {
    backgroundColor: theme.palette.text.primary,
    height: 2,
  },
- '&$disabled:before': {
+ '&$disabled:before, &$disabled:hover:before': {
    height: 1,
    background: 'transparent',
    backgroundImage: `linear-gradient(to right, ${theme.palette.input
      .bottomLine} 33%, transparent 0%)`,
    backgroundPosition: 'left top',
    backgroundRepeat: 'repeat-x',
    backgroundSize: '5px 1px',
  },

[oowowaee]

I had tried overwriting the
'&:hover:not($disabled):before': {
Unfortunately, the original selector is still being favored.

Apparently it will work if I also make an empty selector for the disabled class:

overridesUnderline: {
    '&:hover:not($disabled):before': {
      backgroundColor: 'rgba(0, 0, 0, 0.42)'
    }
  },
  disabled: {
  },

This feels very unintuitive. I would suggest documenting it.

[oliviertassinari]

@oowowaee What about a fake classname?

overridesUnderline: {
  '&:hover:not(.foo):before': {
    backgroundColor: 'rgba(0, 0, 0, 0.42)'
  }
},

[jamalcoder]

textinput underline ...the (hover before) not working in material-ui v1.0.0-rc.1
'&:hover:before': {
backgroundColor: theme.palette.text.primary,
height: 2,
}

[jamalcoder]

solved....
'&:hover:not($disabled):not($error):not($focused):before': {
borderBottomColor: '#cdcde7',
// borderBottom: '2px solid rgb(205, 205, 231)'
// display: 'none'
},
},
disabled: {},
error: {},
focused: {},