如何让ToggleButtonGroup中的ToggleButton生效borderRadius？

MUI的ToggleButtonGroup组件默认会为内部按钮添加特殊样式：重置中间按钮的左右圆角，同时调整首尾按钮的圆角规则，这导致单独给ToggleButton设置borderRadius会被覆盖。以下是两种可行的解决方案：

方案一：通过ToggleButtonGroup的sx属性全局覆盖 #

直接在ToggleButtonGroup上设置样式，覆盖其默认的圆角重置规则：

<ToggleButtonGroup
  sx={{
    '& .MuiToggleButton-root': {
      borderRadius: '5px',
      m: 0.25,
      px: 2,
      py: 0.75,
      fontSize: 14,
      fontWeight: 600,
      backgroundColor: '#F8FAFB',
      
      '&.Mui-selected': {
        backgroundColor: 'white',
      },

      // 强制覆盖ToggleButtonGroup的默认圆角重置逻辑
      '&:first-of-type': { borderRadius: '5px' },
      '&:last-of-type': { borderRadius: '5px' },
      '&:not(:first-of-type)': { borderRadius: '5px' },
    },
  }}
>
  <ToggleButton value="btn1">按钮1</ToggleButton>
  <ToggleButton value="btn2">按钮2</ToggleButton>
  <ToggleButton value="btn3">按钮3</ToggleButton>
</ToggleButtonGroup>

方案二：自定义StyledToggleButton组件 #

使用MUI的styled工具创建自定义按钮组件，彻底脱离默认的圆角限制：

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

const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
  borderRadius: '5px',
  margin: theme.spacing(0.25),
  padding: theme.spacing(0.75, 2),
  fontSize: 14,
  fontWeight: 600,
  backgroundColor: '#F8FAFB',

  '&.Mui-selected': {
    backgroundColor: 'white',
  },

  // 覆盖ToggleButtonGroup的默认样式规则
  '&:first-of-type': { borderRadius: '5px' },
  '&:last-of-type': { borderRadius: '5px' },
  '&:not(:first-of-type)': {
    borderRadius: '5px',
    borderLeft: `1px solid ${theme.palette.divider}`, // 可选：恢复中间按钮左边框，避免视觉断层
  },
}));

// 使用示例
<ToggleButtonGroup>
  <StyledToggleButton value="btn1">按钮1</StyledToggleButton>
  <StyledToggleButton value="btn2">按钮2</StyledToggleButton>
  <StyledToggleButton value="btn3">按钮3</StyledToggleButton>
</ToggleButtonGroup>

核心原理 #

ToggleButtonGroup通过:first-of-type、:last-of-type和:not(:first-of-type)伪类选择器，强制修改按钮的borderRadius属性。我们需要针对性地覆盖这些选择器的样式，确保所有按钮的圆角设置优先级高于默认规则。

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