React material-ui 速记类名不起作用？

Posted 2023-03-16

【中文标题】React material-ui 速记类名不起作用？

【英文标题】：React material-ui shorthand classNames not working?

【发布时间】：2020-02-21 14:28:41

【问题描述】：

"className= "mb-4"（marginBottom）或className= "p-10"（填充）不起作用。你能帮忙吗？

<div className="mb-24"></div>

【问题讨论】：

material-ui.com/system/spacing

【参考方案1】：

在 React Material-ui 中，不能为 margin/padding 编写 className(shorthand)。因为 react material-ui 不支持提到的速记类。你可以写如下： 当您想使用边距/填充属性时，您需要导入它并使用。

import  spacing  from '@material-ui/system';
const theme = 
  spacing: 8,


<Box m=-2 /> // margin: -16px;
<Box m=0 /> // margin: 0px;
<Box m=0.5 /> // margin: 4px;
<Box m=2 /> // margin: 16px;

也可以直接使用：

<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto;
<Box my="auto" /> // margin-top: auto; margin-bottom: auto;

和 你想使用像 mb-4 这样的类： 您可以导入css文件并在其中定义。因为（mb-4 类是引导速记类）。

demo.css：

.mb-4
margin-bottom:4px;

demo.js

import 'demo.css';
<div className="mb-4">

你也参考这个文件：material-ui.com/system/spacing