Material UI 删除 TextField 自动填充的黄色背景
Material UI remove the yellow background on TextField autofill
我很难从 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);
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
使用 classes 来做到这一点。
如果你想使用 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”伪class,你只需要调整你的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);
您也可以利用这些 class 方法中的任何一种,但是通过 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);
这是一个包含所有这些方法的工作示例:
您可以将其添加到覆盖的主题中。
overrides: {
MuiOutlinedInput: {
input: {
'&:-webkit-autofill': {
'-webkit-box-shadow': '0 0 0 100px #000 inset',
'-webkit-text-fill-color': '#fff'
}
}
}
}
我很难从 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);
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
使用 classes 来做到这一点。
如果你想使用 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”伪class,你只需要调整你的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);
您也可以利用这些 class 方法中的任何一种,但是通过 classes
属性:
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);
这是一个包含所有这些方法的工作示例:
您可以将其添加到覆盖的主题中。
overrides: {
MuiOutlinedInput: {
input: {
'&:-webkit-autofill': {
'-webkit-box-shadow': '0 0 0 100px #000 inset',
'-webkit-text-fill-color': '#fff'
}
}
}
}