Material UI中Button组件添加四周外边距失效如何解决

失效原因 #

你给Button直接加mt参数不生效，是因为MUI的间距系统属性（mt、mb、mx、my、m这类）默认不能直接作为组件原生prop传递，需要通过指定入口配置，另外组件外层的原生div、Toolbar默认样式也可能影响间距效果。

解决方案 #

方案1：使用sx属性配置（MUI v5 官方推荐，最简实现）

如果要给每个按钮加四周外边距，直接把间距配置写在Button的sx属性中即可：

// SeasonComponent 内部代码
return (
  <div>
    <Button 
      variant="outlined" 
      color="primary" 
      onClick={handleClickOpen}
      sx={{ m: 2 }} // m代表四周外边距，MUI默认1单位为8px，2即16px，可按需调整
    >
      Button text 
    </Button>
  </div>
)

如果不想逐个修改自定义组件内部代码，也可以直接在Toolbar层统一配置子元素间距：

// 布局层代码
<Box display="flex">
  <Box m="auto">
    <Toolbar sx={{ '& > *': { m: 2 } }}> {/* 给所有直接子元素统一加四周外边距 */}
      <SeasonComponent />
      <WeekComponent />
      <GameComponent />
    </Toolbar>
  </Box>
</Box>

方案2：用MUI Box组件替代原生div

Box是MUI封装的容器组件，原生支持间距属性，直接在Box上配置即可生效：

// SeasonComponent 内部代码
import { Box } from '@mui/material';

return (
  <Box m={2}> {/* 直接配置间距属性 */}
    <Button 
      variant="outlined" 
      color="primary" 
      onClick={handleClickOpen}
    >
      Button text 
    </Button>
  </Box>
)

方案3：makeStyles 实现（适配MUI v4、v5兼容模式）

如果你需要用makeStyles方案，正确写法如下：

import { makeStyles } from '@mui/styles';

// 定义样式
const useStyles = makeStyles({
  btnWithMargin: {
    margin: '16px', // 对应m={2}的间距大小
  },
});

// 组件内调用
function SeasonComponent() {
  const classes = useStyles();
  const handleClickOpen = () => {};
  return (
    <div>
      <Button 
        variant="outlined" 
        color="primary" 
        onClick={handleClickOpen}
        className={classes.btnWithMargin}
      >
        Button text 
      </Button>
    </div>
  );
}

注意事项 #

如果配置后间距不符合预期，可检查Toolbar的默认内边距是否冲突，可通过给Toolbar加sx={{ padding: 0 }}清除默认内边距后再调整。

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