The replacement for inputStyle
would be inputProps
:
const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />
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.
There are also several other ways to do this using classes via withStyles
.
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);
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:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…