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

【问题标题】：React material-ui shorthand classNames not working?React material-ui 速记类名不起作用？
【发布时间】：2020-02-21 14:28:41
【问题描述】：

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

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

【问题讨论】：

material-ui.com/system/spacing

标签： reactjs material-ui

【解决方案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

【讨论】：