Material UI ToggleButton选中状态左侧边框不显示问题求助

问题原因 #

MUI的ToggleButtonGroup组件默认会对组内非第一个按钮设置border-left: 0，用来实现按钮组的无缝视觉效果。这个内置CSS规则的优先级高于你自定义的选中状态边框样式，导致选中时左侧边框被覆盖隐藏；而hover状态未受该规则影响，所以显示正常。

修复方案 #

方案1：强制覆盖默认样式 #

在选中状态样式中明确指定border-left，通过!important提升优先级：

const ToggleButton = styled(MuiToggleButton)({
  '&.MuiToggleButton-root': {},
  '&.Mui-selected:hover': {
    color: '#10B981',
    backgroundColor: 'transparent',
    border: '1px solid #10B981',
    borderLeft: '1px solid #10B981 !important',
  },
  '&.Mui-selected': {
    color: '#10B981',
    backgroundColor: 'transparent',
    border: '1px solid #10B981',
    borderLeft: '1px solid #10B981 !important',
  },
});

方案2：关闭ToggleButtonGroup的边框合并逻辑 #

调整ToggleButtonGroup的spacing属性为0，组件会自动取消默认的border-left: 0规则：

<ToggleButtonGroup spacing={0}>
  <ToggleButton value="option1">选项1</ToggleButton>
  <ToggleButton value="option2">选项2</ToggleButton>
</ToggleButtonGroup>

此方案无需修改自定义样式，保持原有代码即可生效。

方案3：针对特定按钮单独设置 #

如果仅需个别按钮显示左侧边框，可给目标按钮添加自定义类名后单独配置样式：

const ToggleButton = styled(MuiToggleButton)({
  // 基础样式
  '&.Mui-selected': {
    color: '#10B981',
    backgroundColor: 'transparent',
    border: '1px solid #10B981',
  },
  '&.Mui-selected:hover': {
    color: '#10B981',
    backgroundColor: 'transparent',
    border: '1px solid #10B981',
  },
  // 自定义类名样式
  '&.show-left-border.Mui-selected': {
    borderLeft: '1px solid #10B981',
  },
});

// 使用示例
<ToggleButton className="show-left-border" value="target">目标按钮</ToggleButton>

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