React+Material UI中如何缩小Button内startIcon与文本的间距

云上老周

2026-8-27

问题背景

使用React + Material UI技术栈开发时，需要缩小Button组件内startIcon与「Log In」文本之间的间距，尝试设置size="small"未达到预期效果，参考效果如下：
Button图标与文本间距示例
对应业务代码：

<Button
  variant="contained"
  size="small"
  startIcon={<PersonIcon color="buttonwordcolor" />}
>
  <Typography variant="h6" color="buttonwordcolor.main">
    Log In
  </Typography>
</Button>

可行实现方案

MUI Button的图标与文本间距，是通过图标元素的右侧外边距控制的。设置size="small"失效的原因是你在Button内部嵌套了自定义Typography组件覆盖了默认文本节点，默认的尺寸适配规则没有匹配到这个自定义文本结构，直接覆写startIcon的边距属性即可，两种常用方案按需选择：

局部单组件调整（推荐，不会影响其他按钮）：通过Button的sx属性选中内置的startIcon类名，自定义marginRight数值，数值越小间距越窄，默认small尺寸下该值为8px，可根据需求调整：

<Button
  variant="contained"
  size="small"
  startIcon={<PersonIcon color="buttonwordcolor" />}
  sx={{
    ".MuiButton-startIcon": {
      marginRight: "4px" // 可调整为2px、0等值匹配设计要求
    }
  }}
>
  <Typography variant="h6" color="buttonwordcolor.main">
    Log In
  </Typography>
</Button>

全局统一配置：如果项目内所有带icon的按钮都需要统一调整间距，可以在MUI主题配置中覆写Button的默认样式规则：

import { createTheme } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        startIcon: {
          // 通用尺寸间距
          marginRight: "6px",
          // 单独适配small尺寸按钮的间距
          "&.MuiButton-sizeSmall": {
            marginRight: "3px"
          }
        }
      }
    }
  }
})