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

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

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

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

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

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

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

App.tsx:

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

App.css:

.container-padding {
  padding: 30px;
}

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

Введите здесь описание изображения

Я открыт для предложений.


reactjs material-ui react-material
person Jordec    schedule 07.11.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В @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 - поля со всех сторон

mx - Расстояние по горизонтали

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

person Gangadhar Gandi    schedule 07.11.2019
comment
Это было бы идеально, но расстояние над моим элементом не работает. См. пример обновления - person Jordec; 07.11.2019
comment
Используйте элемент Box с m/mx/my для достижения интервала. Обновил код, проверьте - person Gangadhar Gandi; 07.11.2019

arrow_upward
0
arrow_downward

Я использовал селектор Lobotomized Owl от Heydon Pickering: * + * .

Я создал компонент "контейнер" Vertical.js:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Box } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  vertical: {
    '& > *+*': {
      marginTop: '1.5rem',
    },
  },
}));

const Vertical = ({ children }) => {
  const classes = useStyles();
  return <Box className={classes.vertical}>{children}</Box>;
};

export default Vertical;

Затем используйте его в любых других компонентах, например. Example.js:

import React from 'react';
import Vertical from './Vertical';

const Example = () => {
  return (
    <Vertical>
      <Component/>
      <Component />
      <Another />
      <AnotherComponent />
    </Vertical>
  );
};

export default Example;
person John    schedule 03.03.2021