当前位置: 首页 > 面试题库 >

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

卢文博
2023-03-14
问题内容

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

问题答案:

对于更换inputStyleinputProps

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

InputPropsvs. inputProps是常见的混淆点。大写字母“ I”
InputProps为其中的Input元素提供了道具TextFieldInput将native包裹在inputdiv)。小写的“ i”
inputPropsinputInput组件内呈现的本机元素提供了支持。如果要向本机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);

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



 类似资料:
  • 本文向大家介绍怎样修改chrome记住密码后自动填充表单的黄色背景?相关面试题,主要包含被问及怎样修改chrome记住密码后自动填充表单的黄色背景?时的应答技巧和注意事项,需要的朋友参考一下 input:-webkit-autofill { -webkit-box-shadow: 0 0 3px 100px #eee inset; //改变填充背景色 }

  • 我正在使用Android v21支持库。 我已经创建了一个自定义背景颜色的按钮。当我使用背景色时,像涟漪,揭示的材质设计效果已经消失了(除了点击时的提升)。

  • 问题内容: 我在从CardMedia图片上的道具获取图片时遇到了一些麻烦: 它只是不渲染所有图像。所有其他props值将按需渲染。同样作为Material UI,我在JS css上指定了CardMedia的高度。 有谁知道为什么会这样吗? 问题答案: 好的,有同样的问题。终于成功了。 您还可以检查:https : //codesandbox.io/s/9zqr09zqjo-无选项加载图像。图片位置

  • 从 1.2 版本开始, UI 的 Sprite 组件支持自定义材质的使用,其使用界面如下图: 其使用方法与其他材质并无不同,但由于 Sprite 面板有基于 UI 内置材质的功能,所以有一些需要注意的点: 当设置自定义材质数量为 0 或为空时,会使用默认材质进行渲染,面板功能及使用方法可参考 Sprite UI 并不支持多材质,自定义材质的数量最多为一个 当使用了 ui 自定义材质之后,面板上的

  • 我正在尝试绕过与Android Material Design集成的不同功能,但是当一个视图填充另一个视图时,我无法执行这种类型的动画: 你知道怎么做吗,或者一个库/项目的例子来做到这一点吗?

  • 我正在我的项目中使用一个材料UI自动完成组件(“faculdade”字段)。然而,当我关注这个组件时,动画/过渡是由中间向外展开的。我希望动画像“密码”字段。从左到右。但我不知道该如何改变这一点。有人知道吗?