Material-UI:在TextField中更改自动填充背景色 [英] Material-UI: Change autofill background color in TextField

问题描述

当前，我具有样式化的TextField.当我开始在电子邮件字段中键入时，会出现自动填充选项.如果选择自动填充选项之一，则TextField的背景会变成白色，带有黑色文本.我想更改这些样式.

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.

我已经尝试过了:

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组件更改为以下内容:

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;

上面没有任何改变.

1. 以上方法是否正确(除了InputProps中缺少的className之外)?
2. 如何在InputProps中使用多个className?

推荐答案

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

For the DarkTextField syntax there are a couple options:

第一种语法将通过classes 道具的单独键(下划线和 input )传递所有类="https://material-ui.com/api/input/#css" rel ="nofollow noreferrer">输入.

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}} />;
});

第二种语法将结合类名称( classNames 提供一种简单的方法来获取由空格分隔的类名称的综合字符串)，以便在 Input的根目录下使用 className 属性.

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)}} />;
});

这篇关于Material-UI:在TextField中更改自动填充背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！