Material-UI中Paper内Button用spacing属性添加上边距失效问题排查

我明白你遇到的问题了——直接给Button加mt属性没效果，这是因为Material-UI的Button组件默认没有集成system spacing属性，所以你写的mt={1}不会被组件解析。下面给你几个简单可行的解决方案：

方案一：用Box组件包裹Button #

Box是Material-UI专门用来处理布局间距的组件，天然支持spacing属性。你只需要把Button放在Box里面，给Box设置mt值即可：

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';

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包裹Button，设置上边距 */}
          <Box mt={2}>
            <Button 
              variant="contained" 
              fullWidth 
              style={{ backgroundColor: "green", color: "white" }}
            >
              Suchen
            </Button>
          </Box>
        </Paper>
      </Box>
    </div>
  );
}

方案二：通过makeStyles添加边距 #

直接在自定义样式里给Button设置marginTop，利用theme提供的spacing方法来保持设计一致性：

const useStyles = makeStyles(theme => ({
  root: {
    width: "70vw",
  },
  button: {
    // 使用theme.spacing设置边距，数值对应主题的间距单位
    marginTop: theme.spacing(1),
  },
}));

// 然后给Button添加className
<Button 
  variant="contained" 
  fullWidth 
  className={classes.button}
  style={{ backgroundColor: "green", color: "white" }}
>
  Suchen
</Button>

额外小提示 #

• fullWidth是布尔属性，不需要写成fullWidth="true"，直接写fullWidth即可；
• Material-UI的Button组件color属性默认没有green选项，你用style自定义背景色的方式是对的，如果后续需要复用绿色按钮，可以考虑自定义主题扩展颜色。

内容的提问来源于stack exchange，提问作者ConanCode