Какие компоненты React Material-UI добавляют интервал на мою страницу (как класс строк в Bootstrap)? - PullRequest
Новая
       33

Какие компоненты React Material-UI добавляют интервал на мою страницу (как класс строк в Bootstrap)?

1 голос
/ 07 ноября 2019

Я создал проект, используя React и Material-UI для React.

Исходя из фона Bootstrap, я заметил, что ни один из этих компонентов не имеет отступов вокруг своихкомпоненты.

В Bootstrap я могу добавить интервал следующим образом: 

<div class="row">
    <div class="col-xs-12">
    ...
    </div>
</div>

Но я понятия не имею, какой компонент использовать для создания такого интервала.

I 'В настоящее время я использую пользовательские классы для создания некоторого интервала, но это не правильно.

App.tsx: 

<Container maxWidth="lg" className="container-padding">
    ...
</Container>

Приложение. css: 

.container-padding {
  padding: 30px;
}

Например, добавить интервал между этими элементами с существующим компонентом:

Enter image description here

I 'м открыт для предложений.

1 Ответ

2 голосов
/ 07 ноября 2019

В @material-ui есть компонент макета сетки, похожий на сетку Bootstrap. Оба основаны на сетке из 12 столбцов.

В приведенном ниже примере это показано, 

import Box from '@material-ui/core/Box';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

return (
<Box m={4}>
 <Grid container spacing={3}>
  <Grid item xs={6}>
    <Paper>xs=6</Paper>
  </Grid>
  <Grid item xs={6}>
    <Paper>xs=6</Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs={3}>
    <Paper>xs=3</Paper>
  </Grid>
 </Grid>
</Box>
<Box mx={3}>
  Box 2 content
</Box>
<Box my={3}>
  Box 3 content
</Box>
);

Итак, подведем итог:

m - все стороны поля

мх - расстояние по горизонтали

my - расстояние по вертикали

...