如何修复MUI图标按钮中的文本对齐问题？

你判断得很准，这类文本上下间距不一致的问题，大多和line-height、元素对齐基线或者按钮内部默认布局有关，下面是几个通用的修复思路：

• 统一文本行高与对齐基线
  给按钮内的文本设置固定line-height，同时让图标和文本对齐到同一基线。可以用MUI的Typography组件包裹文本，或者直接写自定义样式：

  import { IconButton, Typography } from '@mui/material';
  
  <IconButton>
    <YourIcon />
    <Typography sx={{ lineHeight: '1', verticalAlign: 'middle' }}>按钮文本</Typography>
  </IconButton>
  

• 重置按钮内部布局
  覆盖MUI按钮默认的内边距和对齐规则，用flex布局强制元素居中，同时消除默认间距影响：

  <IconButton sx={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    '& .MuiIcon-root': { verticalAlign: 'middle' },
    '& span': { lineHeight: 'inherit' }
  }}>
    <YourIcon />
    按钮文本
  </IconButton>
  

• 全局样式统一修复
  如果多个页面都存在这个问题，直接在MUI主题里全局配置，避免重复写样式：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiIconButton: {
        styleOverrides: {
          root: {
            alignItems: 'center',
            '& .MuiTypography-root': {
              lineHeight: '1',
              verticalAlign: 'middle'
            }
          }
        }
      }
    }
  });
  
  // 在App外层包裹ThemeProvider生效
  <ThemeProvider theme={theme}>
    {/* 应用内容 */}
  </ThemeProvider>
  

• 微调字体基线偏移
  部分字体本身的基线设计会导致视觉偏移，这种情况可以用transform微调文本位置：

  <Typography sx={{ lineHeight: '1', transform: 'translateY(-1px)' }}>按钮文本</Typography>
  

内容的提问来源于stack exchange，提问作者Page not found