Material-UI：更改 TextField 中的自动填充背景颜色

目前，我有一个样式化的文本字段。当我开始在电子邮件字段中输入时，会出现自动填充选项。如果我选择自动填充选项之一，文本字段的背景将变为白色并带有黑色文本。我想改变这些风格。

我试过这个：

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;

根据评论将 DarkTextField 组件更改为以下内容：

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;

以上没有做任何改变。

1. 上述方法是否正确（除了 InputProps 中缺少的 className 之外）？
2. 如何在 InputProps 中使用多个 className？

For the DarkTextField语法有几个选项：

第一个语法将通过单独的键传递所有类（underline and input） 的classes的支柱Input https://material-ui.com/api/input/#css.

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

第二种语法将组合类名（classNames提供了一种简单的方法来获取以空格分隔的类名的完整字符串）以在根级别使用Input通过className prop.

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