Material-UI: Change autofill background color in TextField

Question

Currently, I have a styled TextField. When I start to type in the email field, autofill choices appear. If I select one of the autofill choices, the background of the TextField turns white with black text. I want to change these styles.

I've tried this:

import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";

const styles = {
  underline: {
    "&::before": {
      borderBottom: "1px solid #90caf9"
    },
    "&:hover:not(.Mui-disabled):before": {
      borderBottom: "2px solid #90caf9"
    },
    "&::after": {
      borderBottom: "2px solid #90caf9"
    }
  },
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px black inset"
    }
  }
};

const DarkTextField = withStyles(styles)(props => {
  const { classes, ...other } = props;

  return <TextField InputProps={{ className: classes.underline }} {...other} />;
});

export default DarkTextField;

Changed DarkTextField component to the following in light of comments:

import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import classNames from "classnames";
import React from "react";

const styles = {
  underline: {
    "&::before": {
      borderBottom: "1px solid #90caf9"
    },
    "&:hover:not(.Mui-disabled):before": {
      borderBottom: "2px solid #90caf9"
    },
    "&::after": {
      borderBottom: "2px solid #90caf9"
    }
  },
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px black inset"
    }
  }

};

const DarkTextField = withStyles(styles)(props => {
  const { classes, ...other } = props;

  return <TextField InputProps={ classNames("classes.underline", "classes.input") } {...other} />;
});

export default DarkTextField;

The above made no change.

1. Are either of the above approaches correct (other than the missing className in InputProps)?
2. How do I use more than one className in the InputProps?

Answer 1

For the DarkTextField syntax there are a couple options:

This first syntax will pass all the classes along via the separate keys (underline and input) of the classes prop of Input.

const DarkTextField = withStyles(styles)(props => {
  const { classes } = props;
  return <TextField InputProps={ {classes: classes}} />;
});

This second syntax will combine the class names (classNames provides an easy way to get the comprehensive space-delimited string of class names) to use at the root level of the Input via the className prop.

const DarkTextField = withStyles(styles)(props => {
  const { classes } = props;
  return <TextField InputProps={ {className: classNames(classes.underline, classes.input)}} />;
});