I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Please refer to the screenshot from chrome dev tools for clarification.
const useStyles = makeStyles((theme) => ({
inputLabelFocused: {
color: "black",
},
}));
const classes = useStyles();
<TextField
id="toDo"
label="To Do"
multiline
rows={4}
variant="filled"
fullWidth
InputLabelProps={{
classes: {
focused: classes.inputLabelFocused,
},
}}
/>