Change onHover colour of TextField Material-UI v1

Question

I m unable to change the onHover color of the TextField by overriding the classname. How can I do that?

I'm using material UI v1: https://github.com/callemall/material-ui/tree/v1-beta

Answer 1

Overriding with classes didn't help. It worked by overriding MUIclass in createMuiTheme as below.

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):before': {
          backgroundColor: 'rgba(0, 188, 212, 0.7)',
        },
      },
    },
  },
});

Answer 2

TextField is implemented using the Input component, which exposes a class named underline as part of its CSS API. Here is the the current definition of this class from the Input source:

underline: {
  paddingBottom: 2,
  '&:before': {
    backgroundColor: theme.palette.input.bottomLine,
    left: 0,
    bottom: 0,
    // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
    content: '""',
    height: 1,
    position: 'absolute',
    right: 0,
    transition: theme.transitions.create('backgroundColor', {
      duration: theme.transitions.duration.shorter,
      easing: theme.transitions.easing.ease,
    }),
  },
  '&:hover:not($disabled):before': {
    backgroundColor: theme.palette.text.primary,
    height: 2,
  },
  '&$disabled:before': {
    background: 'transparent',
    backgroundImage: `linear-gradient(to right, ${theme.palette.input
      .bottomLine} 33%, transparent 0%)`,
    backgroundPosition: 'left top',
    backgroundRepeat: 'repeat-x',
    backgroundSize: '5px 1px',
  },
},

To override the Input's classes, you need to pass them through the TextField using its InputProps property. Here is an example where I'm changing the color of the underline to green:

// define a class that will be used to modify the underline class
const styleSheet = createStyleSheet(theme => ({
  greenUnderline: {
    '&:before': {
      backgroundColor: '#0f0',
    },
  },
}));

Override the Input's underline class via the TextField's InputProps:

<TextField
  id="uncontrolled"
  label="Uncontrolled"
  defaultValue="foo"
  className={classes.textField}
  margin="normal"
  InputProps={{ classes: { underline: classes.greenUnderline } }}
/>

This may not be exactly what you're looking to do, but it should get you started.