材质UI删除TextField自动填充上的黄色背景 [英] Material UI remove the yellow background on TextField autofill

问题描述

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

I'm having a really hard time to remove the yellow background on autofill from the Material UI TextField component.

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

In older versions I did it this way:

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

但是在最新版本中，inputStyle道具被删除并添加了InputProps.

But in the recent version the inputStyle prop was removed and added InputProps instead.

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

I've tried to remove it this way, but the yellow background color still appears:

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

推荐答案

inputStyle的替换为inputProps:

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

InputProps与inputProps是常见的混淆点.大写字母"I" InputProps为TextField(将本机input包装在div中).小写的"i" inputProps为在Input组件中呈现的本机input元素提供了支持.如果要向本机input元素提供内联样式，则上面的代码示例将解决问题.

InputProps vs. inputProps is a common point of confusion. Uppercase "I" InputProps provides props for the Input element within TextField (Input wraps the native input in a div). Lowercase "i" inputProps provides props for the native input element rendered within the Input component. If you want to provide inline styles to the native input element, the code example above will do the trick.

还有其他几种使用方法通过withStyles使用类.

There are also several other ways to do this using classes via withStyles.

如果要使用className属性，则必须再次在input上(而不是将其包裹的div上)才能具有所需的效果.因此，以下内容也将起作用:

If you want to use the className property, again this needs to be on the input (rather than the div wrapping it) in order to have the desired effect. So the following will also work:

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语法并添加:

If you want to leverage the ":-webkit-autofill" pseudo-class, you just need to adjust your JSS syntax and add the "&" 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);

您还可以利用这些类方法中的任何一种，但是通过

You can also leverage either of these class approaches, but using uppercase "I" InputProps via the classes property:

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

以下是所有这些方法的有效示例:

Here is a working example with all of these approaches:

这篇关于材质UI删除TextField自动填充上的黄色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！