时间戳

首页 > 解决方案 > Material UI - 使用 Root 和使用 ClassName 覆盖样式

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

问题描述

我是材料 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} 和 classes={{root: classes.menuItem}}

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

谢谢

标签： reactjsmaterial-ui

解决方案

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

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

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

例如，考虑Stepper组件。

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

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

推荐阅读