Question

我在材料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中这不是必需的。也许错误在于没有自己的主题。

Answer 1

您可以使用material-ui样式系统扩展按钮。在这种情况下，间隔系统。一种方法是像这样创建一个名为Button.jsx / Button.tsx的新组件：

import { styled } from "@material-ui/core/styles";
import { spacing } from "@material-ui/system";
import MuiButton from "@material-ui/core/Button";

/**
 * Applies the spacing system to the material UI Button
 */
const Button = styled(MuiButton)(spacing);

export default Button;

现在您可以使用了：<Button mt={2}>Click Me</Button>。如果使用打字稿，按钮道具将自动与所有间距道具一起扩展！

Answer 2

建议使用

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

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

2 个答案: