css - Material UI Menu 组件没有在反应中应用样式

问题描述

我是新手material-UI，在这里我有菜单组件，看起来像，

<Menu
    classes={{ paper: css.paperMenu }}
    className={classNames({
      [css.menuMarginTop]: true
    })}

>

.menuMarginTop {
  margin-top: 14px;
}

还有其他道具。现在，当我尝试在 prop 的基础上添加样式时，样式menuMarginTop没有得到应用，有人可以告诉我该怎么做吗？

谢谢。

标签： cssreactjsmaterial-ui

看起来你使用的是普通的 CSS，但是 material-UI 使用 JSS 底层作为他们的样式解决方案，你可以在这里阅读样式解决方案，以及如何自定义组件的 CSS 在这里。

你可以在你的情况下这样做

import Menu from "@material-ui/core/Menu";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paperMenu: {
    color: "red"
  },
  menuMarginTop: {
    color: "blue"
  }
}));

export default function App(props) {
  const classes = useStyles();
  return (
    <Menu
      classes={{ paper: classes.paperMenu }}
      className={classes.menuMarginTop}
    />
  );
}

在这里，classes.paperMenu将覆盖底层的 paper(component) 类，并将 menuMarginTop应用于 Menu 组件的根元素。 Material-UI在运行时随机生成唯一的类名，因此您不能像其他库那样依赖固定的类名，您只能使用classes道具覆盖底层类，更多信息在上面的链接中

请记住，这是覆盖类的方法之一，还有其他方法以及高阶组件withStyles等withTheme，上面的链接将为您提供足够的信息

css - Material UI Menu 组件没有在反应中应用样式

问题描述

解决方案

推荐阅读