提问者:小点点

物料UI菜单组件未获取在react中应用的样式


我对Material-UI是新手,这里我有一个菜单组件,

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

>

.menuMarginTop {
  margin-top: 14px;
}

也有其他的道具。 现在,当我试图在prop的基础上添加样式时,样式menumargintop没有被应用,有没有人可以告诉我怎么做?。

谢了。


共1个答案

匿名用户

看起来您使用的是普通的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将应用于菜单组件的根元素。 material-ui在运行时随机生成唯一的类名,这样您就不能像其他库那样依赖固定的类名,您只能使用道具覆盖底层类,更多信息请参见上述链接

请记住,这是重写类的方法之一,还有其他方法,如高阶组件with styleswith theme等,上面的链接将为您提供足够的信息