How can i change TextField underline hover color by theme palette?

Question

material-ui v1

How can I change TextField underline hover color by theme palette? I know it possible by overrides, but how it can work for all components by standart palette options? like:

const themeMui = createMuiTheme({
  palette: {
    primary: lightBlue,
    secondary: blue,
    error: red,
    common: {
      darkBlack: blue.A700,
    }
  }
});

What exactly CSS code I want to change:

Answer 1

Hey I realize this is a bit old, but I have been having the same problem. I came up with this. Hope it helps... there docs are not the best on this!

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        color: 'red',
        '&:hover:not($disabled):after': {
          backgroundColor: 'red',
        },
        '&:hover:not($disabled):before': {
          backgroundColor: 'red',          // String should be terminated
        },
      },
    },
  },
});