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

Posted 2023-02-22

【中文标题】我的材质 UI 自定义类被材质 UI 的默认类覆盖

【英文标题】：My material UI custom classes are being overridden by material UI's default classes

【发布时间】：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）并重新安装。

【参考方案1】：

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

【讨论】：

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