Currently, I have a styled TextField. When I start to type in the email field, autofill choices appear. If I select one of the autofill choices, the background of the TextField turns white with black text. I want to change these styles.
I've tried this:
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
const styles = {
underline: {
"&::before": {
borderBottom: "1px solid #90caf9"
},
"&:hover:not(.Mui-disabled):before": {
borderBottom: "2px solid #90caf9"
},
"&::after": {
borderBottom: "2px solid #90caf9"
}
},
input: {
"&:-webkit-autofill": {
WebkitBoxShadow: "0 0 0 1000px black inset"
}
}
};
const DarkTextField = withStyles(styles)(props => {
const { classes, ...other } = props;
return <TextField InputProps={{ className: classes.underline }} {...other} />;
});
export default DarkTextField;
Changed DarkTextField component to the following in light of comments:
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import classNames from "classnames";
import React from "react";
const styles = {
underline: {
"&::before": {
borderBottom: "1px solid #90caf9"
},
"&:hover:not(.Mui-disabled):before": {
borderBottom: "2px solid #90caf9"
},
"&::after": {
borderBottom: "2px solid #90caf9"
}
},
input: {
"&:-webkit-autofill": {
WebkitBoxShadow: "0 0 0 1000px black inset"
}
}
};
const DarkTextField = withStyles(styles)(props => {
const { classes, ...other } = props;
return <TextField InputProps={ classNames("classes.underline", "classes.input") } {...other} />;
});
export default DarkTextField;
The above made no change.
For the DarkTextField
syntax there are a couple options:
This first syntax will pass all the classes along via the separate keys (underline
and input
) of the classes
prop of Input.
const DarkTextField = withStyles(styles)(props => {
const { classes } = props;
return <TextField InputProps={ {classes: classes}} />;
});
This second syntax will combine the class names (classNames
provides an easy way to get the comprehensive space-delimited string of class names) to use at the root level of the Input
via the className
prop.
const DarkTextField = withStyles(styles)(props => {
const { classes } = props;
return <TextField InputProps={ {className: classNames(classes.underline, classes.input)}} />;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With