React material-ui速记classNames不工作？

Question

"className= "mb-4" (marginBottom)或className= "p-10"(填充)不工作。你能帮帮我吗。

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

Answer 1

在React material-ui 中，您不能为边距/填充编写className(速记)。因为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;

你想使用相同的类，如css mb-4：你可以导入css文件并在其中定义。因为(mb-4类是bootstrap速记类)。

demo.css：

.mb-4{
margin-bottom:4px;
}

demo.js

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

您还可以参考这个文档：