Реагировать материал-UI стенографии classNames не работает?

Question

"className= "mb-4" (marginBottom) или className= "p-10" (заполнение) не работает. Не могли бы вы помочь.

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

Answer 1

В React Material-ui , вы не можете написать className (стенограмма) для margin / padding. Потому что реагировать material-ui не поддерживает указанные сокращенные классы. Вы можете написать следующее: когда вы хотите использовать свойство margin / padding, вам нужно импортировать его и использовать.

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