Material UI 移除 TextField 自动填充的黄色背景答案

【问题标题】：Material UI remove the yellow background on TextField autofillMaterial UI 移除 TextField 自动填充的黄色背景
【发布时间】：2019-07-09 10:54:55
【问题描述】：

我很难从 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);

【问题讨论】：

你能分享一个代码沙箱的链接吗？或者提到如何复制它

标签： reactjs material-ui jss

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

inputStyle 的替换将是 inputProps：

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

InputProps 与 inputProps 是一个常见的混淆点。大写“I”InputProps 为TextField 中的Input 元素提供道具（Input 将原生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 语法并添加 "&" to reference the selector of the parent rule:

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

您也可以利用这些类方法中的任何一种，但通过classes 属性使用大写“I”InputProps：

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

以下是所有这些方法的工作示例：

【讨论】：