Question

当前，我具有样式化的TextField。当我开始在电子邮件字段中输入内容时，会出现自动填充选项。如果选择自动填充选项之一，则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;

上面没有任何改变。

以上方法是否正确（除了InputProps中缺少的className）？
如何在InputProps中使用多个className？

Answer 1

对于DarkTextField语法，有两个选项：

第一种语法将通过Input的underline道具的单独键（input和classes）传递所有类。

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

第二种语法将结合类名（classNames提供了一种简便的方法来获取由空格分隔的类名的完整字符串），以通过{{ 1}}属性。

Input

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

1 个答案: