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

【问题标题】：My material UI custom classes are being overridden by material UI's default classes我的材质 UI 自定义类被材质 UI 的默认类覆盖
【发布时间】：2021-11-11 09:19:53
【问题描述】：

我有一个 TextField，我希望在它获得焦点时将其标签着色为黑色。我使用该类变量将类添加到 InputProps，但不幸的是，它被 chrome 开发工具中材质 UI 的默认样式覆盖。这是代码。请查看 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,
        },
      }}
    />

image of custom classes being overridden by default material UI classes in chrome dev tools

【问题讨论】：

听起来不只是你 - github issue
听起来你应该检查以确保你从同一个包中导入你的主题提供者/makeStyles/等 - @material-ui/core/styles 或 @material-ui/styles，但不要混用这些：github.com/mui-org/material-ui/issues/…（但总的来说，尽管已关闭，但问题似乎很活跃） - 你在使用 NextJS 吗？
我正在从 @material-ui/core 导入包括 makeStyles 和 TextField 在内的所有内容。不，我没有使用 next.js。简单的反应。
整个应用程序中的其他地方是否从@material-ui/styles 导入？ GitHub 问题说这是多年来报告的一个常见问题，大部分时间都是开发人员错误（例如，@material-ui/styles 的多个包）。尝试删除你的 node_modules（甚至是 package-lock 或 yarn.lock）并重新安装。

标签： javascript html css reactjs material-ui

【解决方案1】：

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

【讨论】：

我得到了 !important 的用法，但是为什么 Material ui 没有实现自定义样式，而这正是“classes”变量应该做的事情。