材质UI删除TextField自动填充上的黄色背景

Question

我很难从Material UI TextField组件中删除自动填充上的黄色背景。

在旧版本中，我是这样进行的：

const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };
<TextField
    ...
    inputStyle={inputStyle}
/>

但是在最新版本中，该inputStyle道具已删除并添加InputProps。

我试图用这种方法将其删除，但是黄色背景颜色仍然出现：

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

const styles = {
  root: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  },
  input: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  }
};

const renderTextField = (props) => {
    const {
        classes,
        label,
        input,
        meta: { touched, error },
        ...custom
    } = props;

  return (
    <TextField
        label={label}
        placeholder={label}
        error={touched && error}
        helperText={touched && error}
        className={classes.root}
        InputProps={{
            className: classes.input
        }}
        {...input}
        {...custom}
    />
  );
}

renderTextField.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(renderTextField);

Answer 1

您可以将其添加到覆盖的主题中。

overrides: {
  MuiOutlinedInput: {
    input: {
      '&:-webkit-autofill': {
        '-webkit-box-shadow': '0 0 0 100px #000 inset',
        '-webkit-text-fill-color': '#fff'
      }
    }
  }
}

Answer 2

对于更换inputStyle是inputProps：

const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />

InputPropsvs. inputProps是常见的混淆点。大写字母“ I” InputProps为其中的Input元素提供道具TextField（Input将native包裹在input中div）。小写字母“ i” inputProps为input在Input组件内呈现的本机元素提供了支持。如果要向本机input元素提供内联样式，则上面的代码示例将解决问题。

还有其他几种方法可通过使用类使用此方法withStyles。

如果要使用该className属性，则必须再次使用该属性input（而不是将其包装的div），以实现所需的效果。因此，以下内容也将起作用：

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

如果要利用“：-webkit-autofill”伪类，则只需调整JSS语法并添加“＆”即可引用父规则的选择器：

const styles = {
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px white inset"
    }
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

您也可以利用以下两种方法之一，但InputProps通过classes属性使用大写的“ I” ：

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" InputProps={{ classes: { input: classes.input } }} />;
}
export default withStyles(styles)(MyTextField);

这是使用所有这些方法的有效示例：