如何使用间距属性为 Material-UI 内的 Button 添加边距？

Question

我在材质 ui 的纸元素内有一个按钮。我想向按钮添加一些边距顶部，它在 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>。如果使用打字稿，按钮道具将自动扩展所有间距道具！

如果要添加多个系统，请使用该compose功能：

import { compose, spacing, borders } from "@material-ui/system";
...
export default styled(MuiButton)(compose(spacing, borders))

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={}填充而不是边距。