如何让Material UI ToggleButtonGroup按钮保持固定尺寸（无内容时不变）

针对ToggleButtonGroup中无内容按钮尺寸缩小的问题，以下是几个实用解决办法：

方法1：给ToggleButton设置固定最小宽高 #

直接通过sx属性给每个按钮指定最小宽高，强制按钮保持统一尺寸，无论内部是否有内容：

<ToggleButtonGroup value={mode} onChange={handleChange}>
  <ToggleButton value="increase" sx={{ minWidth: 60, minHeight: 40 }}>
    +
  </ToggleButton>
  <ToggleButton value="auto" disabled sx={{ minWidth: 60, minHeight: 40 }}>
    {/* 无内容 */}
  </ToggleButton>
  <ToggleButton value="decrease" sx={{ minWidth: 60, minHeight: 40 }}>
    -
  </ToggleButton>
</ToggleButtonGroup>

注：minWidth和minHeight的数值可以根据你现有按钮的实际尺寸调整，确保完全匹配。

方法2：用透明占位符填充空按钮 #

给无内容的按钮添加一个隐藏的占位元素，让按钮内部有布局支撑，自然保持和其他按钮一致的尺寸：

<ToggleButton value="auto" disabled>
  <span style={{ visibility: 'hidden' }}>--</span>
</ToggleButton>

占位符的内容可以和其他按钮的内容长度相近，这样尺寸匹配更精准，且visibility: hidden不会让占位符显示出来。

方法3：全局统一设置ToggleButton样式 #

如果项目中多处需要这种统一尺寸的ToggleButton，可以通过自定义样式组件或主题覆盖来批量设置：

用styled组件自定义 #

import { styled } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';

const StyledToggleButton = styled(ToggleButton)`
  min-width: 60px;
  min-height: 40px;
`;

// 使用示例
<ToggleButtonGroup value={mode} onChange={handleChange}>
  <StyledToggleButton value="increase">+</StyledToggleButton>
  <StyledToggleButton value="auto" disabled></StyledToggleButton>
  <StyledToggleButton value="decrease">-</StyledToggleButton>
</ToggleButtonGroup>

通过主题覆盖默认样式 #

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

const theme = createTheme({
  components: {
    MuiToggleButton: {
      styleOverrides: {
        root: {
          minWidth: 60,
          minHeight: 40,
        },
      },
    },
  },
});

// 在应用根节点包裹ThemeProvider
<ThemeProvider theme={theme}>
  {/* 你的ToggleButtonGroup组件 */}
</ThemeProvider>

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