Material UI - 使用 Root 和使用 ClassName 覆盖样式答案

【问题标题】：Material UI - Overriding styles using Root & using ClassNameMaterial UI - 使用 Root 和使用 ClassName 覆盖样式
【发布时间】：2021-08-06 01:19:28
【问题描述】：

我是 Material UI 的新手。在学习的过程中，我了解到材质 UI 的样式可以被类的规则名称覆盖。

如果我有一个元素 - MenuItem，我只需要更改文本的默认样式（例如 fontFamily、fontWeight、fontSize）

根据此处提供的文档https://material-ui.com/api/menu-item/，我使用了 makeStyles 钩子并覆盖了 Menu-Item 根元素的一些属性

示例代码

const useStyles = makeStyles((theme) => ({
  menuItem: {
            fontFamily: "Raleway",
      }
  }));

JSX code: <MenuItem onClick={handleClose} component={Link} to="/services" classes={{root: classes.menuItem}}>Services</MenuItem>

在另一个教程中，我发现了另一种覆盖方式 - 使用 className 之类的

const useStyles = makeStyles((theme) => ({
      menuItem: {
                fontFamily: "Raleway",
          }
      }));
    
    JSX code: <MenuItem onClick={handleClose} component={Link} to="/services" className={classes.menuItem}>Services</MenuItem>

我的问题在于这部分className={classes.menuItem} and classes={{root: classes.menuItem}}

在使用 root 时 -> 我看到 css 属性被添加到根元素中，但在使用 className={classes.menuItem} 时，我看到一个新类被添加到 DOM 中。但这两种方法在应用程序的行为方面有什么区别，还是只是另一种方式？

谢谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

从我使用 Material UI 的经验来看，不同之处在于您正在尝试做的事情。

className={classes.menuItem} 和 classes={{root: classes.menuItem}} 都会为您提供预期的结果，正如您已经发现的那样。

当您开始构建自定义主题时，这些区别很重要，因为 Material UI 允许您将类作为一个整体应用于组件，这意味着可能由其他组件组成，或者如果您需要更高的特异性，则将样式传递给根元素.

例如，考虑Stepper 组件。

classes={{root: classes.menuItem}} 将覆盖组件中的root，应用您的样式。

className={classes.menuItem} 将向组件添加一个额外的类，保持底层样式不变。

【讨论】：