我对Material-UI
是新手,这里我有一个菜单组件,
<Menu
classes={{ paper: css.paperMenu }}
className={classNames({
[css.menuMarginTop]: true
})}
>
.menuMarginTop {
margin-top: 14px;
}
也有其他的道具。 现在,当我试图在prop的基础上添加样式时,样式menumargintop
没有被应用,有没有人可以告诉我怎么做?。
谢了。
看起来您使用的是普通的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 styles
,with theme
等,上面的链接将为您提供足够的信息