Как добавить поле для Button внутри Material-UI с атрибутом spacing?

Question

У меня есть кнопка внутри бумажного элемента в материале пользовательского интерфейса. Я хочу добавить немного отступа к кнопке, чтобы он имел некоторый интервал между компонентом FullWidthTabs и кнопкой.

Код:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import FullWidthTabs from './FullWidthTabs';
import Paper from '@material-ui/core/Paper';
import { spacing } from '@material-ui/system';

const useStyles = makeStyles(theme => ({
  root: {
    width: "70vw",
  },
}));

export default function Bookingbox() {
  const classes = useStyles();

  return (
    <div>
      <Box mx="auto" className={classes.root}>
        <Paper elevation={20} >
          <FullWidthTabs />
          <Button variant="contained" 
                    color="green"
                    className={classes.button} 
                    fullWidth="true"
                    mt={1}
                    style={{
                        backgroundColor: "green",
                        color: "white"
                    }}>
                Suchen
            </Button>
        </Paper>
      </Box>
    </div>
  );
}

В соответствии с документами material-ui (https://material -ui.com / system / spacing / ), интервал должен работать, если я добавлю mt к своей кнопке. Я сделал это, но результата нет.

Отказ от ответственности: Я еще не создал собственную тему, но из моего POV это не нужно. Возможно, ошибки заключаются в отсутствии собственной темы.

Answer 1

Компонент Box рекомендуется для простоты использования для добавления полей и отступов в ваши компоненты. Попробуйте использовать код ниже.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import FullWidthTabs from './FullWidthTabs';
import Paper from '@material-ui/core/Paper';
import { spacing } from '@material-ui/system';

const useStyles = makeStyles(theme => ({
  root: {
    width: "70vw",
  },
}));

export default function Bookingbox() {
  const classes = useStyles();

  return (
    <div>
      <Box mx="auto" className={classes.root}>
        <Paper elevation={20} >
          <FullWidthTabs />
          <Box mt={10}>
            <Button variant="contained"
              color="green"
              className={classes.button}
              fullWidth="true"
              mt={1}
              style={{
                backgroundColor: "green",
                color: "white"
              }}>
              Suchen
            </Button>
          </Box>
        </Paper>
      </Box>
    </div>
  );
}

Вы можете изменить mt = {} на pt = {} для заполнения вместо поля.