自定义Material UI类被默认样式覆盖，TextField聚焦标签改色不生效

这个问题是Material UI内置样式的CSS选择器权重高于自定义makeStyles生成的单类选择器导致的，可通过以下任意一种方法解决：

• 方案1：快速强制覆盖，给样式添加!important标识符

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

其余TextField相关代码无需修改。

• 方案2：提升自定义选择器权重（无需!important，符合CSS最佳实践）
  通过双&符号叠加类选择器，提高权重优先级超过MUI默认样式：

const useStyles = makeStyles((theme) => ({
  inputLabelFocused: {
    "&&": {
      color: "black",
    }
  },
}));

• 方案3：直接在TextField上使用sx属性声明样式，MUI的sx属性优先级默认高于内置样式，无需额外配置InputLabelProps类名：

<TextField
  id="toDo"
  label="To Do"
  multiline
  rows={4}
  variant="filled"
  fullWidth
  sx={{
    "& .MuiInputLabel-root.Mui-focused": {
      color: "black"
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Hyphen Frox