我的材质 UI 自定义类被材质 UI 的默认类覆盖

Question

我有一个TextField，我想在它聚焦时将其标签涂成黑色。我添加了类的InputProps与类变量，但不幸的是，它被材料UI的默认样式在chrome开发工具覆盖。下面是代码。请查看chrome开发工具的截图

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,
},
}}
/>

chrome开发工具中自定义类被默认材质UI类覆盖的图像

Answer 1

const useStyles = makeStyles({
inputLabelFocused: {
color: "black !important",
},
});