如何在Material-UI中添加带有间隔属性的Button的边距？

debugcn 发表于 Dev

写

我在材质ui的纸元素内有一个按钮。我想在Button上添加一些页边距，它在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中这不是必需的。也许错误在于没有自己的主题。

哈桑·塞法·奥扎尔普（Hasan Sefa Ozalp）

建议使用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 = {}进行填充，以代替空白。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。