Question

"className= "mb-4"（marginBottom）或className= "p-10"（填充）无效。你能帮忙吗？

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

Answer 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

React Material-UI速记className不起作用？

1 个答案: