如何移除MUI ToggleButton默认右侧边框圆角？修改圆角值时styled组件失效怎么办？

嘿，我来帮你搞定这两个样式问题～ 首先得说，你用styled没生效的原因是MUI给ToggleButtonGroup里的分组按钮（带.MuiToggleButtonGroup-grouped类）加的样式优先级更高，直接给ToggleButton加的样式会被覆盖。下面分情况给你解决方案：

1. 移除组件默认的右侧边框圆角 #

这里分两种场景处理：

• 单个ToggleButton（不在Group中）：没有更高优先级的样式干扰，直接用styled或者sx prop覆盖默认圆角即可：

  // 用styled组件
  const StyledToggleButton = styled(ToggleButton)({
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
  });
  
  // 或者用sx prop更灵活
  <ToggleButton sx={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>按钮</ToggleButton>
  

• ToggleButtonGroup中的按钮：默认样式已经给非最后一个按钮的右侧圆角设为0了，如果要让所有按钮（包括最后一个）的右侧圆角都移除，需要针对.MuiToggleButtonGroup-grouped类设置：

  const StyledToggleButtonGroup = styled(ToggleButtonGroup)({
    '& .MuiToggleButtonGroup-grouped': {
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
    },
  });
  

2. 修改默认0值的边框圆角为其他数值 #

这就是你遇到的核心问题，因为默认的.MuiToggleButtonGroup-grouped:not(:last-of-type)样式优先级更高，直接给ToggleButton加styled会被覆盖。推荐这几种有效方法：

方法一：用styled针对Group内的分组按钮 #

直接给ToggleButtonGroup添加样式，内部匹配对应的类：

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

const StyledToggleButtonGroup = styled(ToggleButtonGroup)({
  '& .MuiToggleButtonGroup-grouped:not(:last-of-type)': {
    borderTopRightRadius: 4,
    borderBottomRightRadius: 4,
  },
  // 如果你还想调整最后一个按钮的左侧圆角（默认也是0），可以加上这段
  '& .MuiToggleButtonGroup-grouped:not(:first-of-type)': {
    borderTopLeftRadius: 4,
    borderBottomLeftRadius: 4,
  },
});

// 使用示例
<StyledToggleButtonGroup value={value} onChange={handleChange}>
  <ToggleButton value="left">左按钮</ToggleButton>
  <ToggleButton value="middle">中间按钮</ToggleButton>
  <ToggleButton value="right">右按钮</ToggleButton>
</StyledToggleButtonGroup>

方法二：用sx prop直接在Group上写样式 #

如果不想额外创建styled组件，用sx更轻便：

<ToggleButtonGroup
  value={value}
  onChange={handleChange}
  sx={{
    '& .MuiToggleButtonGroup-grouped:not(:last-of-type)': {
      borderTopRightRadius: 4,
      borderBottomRightRadius: 4,
    },
  }}
>
  <ToggleButton value="left">左按钮</ToggleButton>
  <ToggleButton value="middle">中间按钮</ToggleButton>
  <ToggleButton value="right">右按钮</ToggleButton>
</ToggleButtonGroup>

方法三：全局修改（适用于全项目统一样式） #

如果你的项目里所有ToggleButtonGroup都需要这个样式，可以在主题配置里全局修改：

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

const theme = createTheme({
  components: {
    MuiToggleButtonGroup: {
      styleOverrides: {
        grouped: {
          '&:not(:last-of-type)': {
            borderTopRightRadius: 4,
            borderBottomRightRadius: 4,
          },
          '&:not(:first-of-type)': {
            borderTopLeftRadius: 4,
            borderBottomLeftRadius: 4,
          },
        },
      },
    },
  },
});

// 把ThemeProvider套在根组件外层
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

这些方法的样式优先级都足够高，能覆盖MUI的默认样式，肯定能生效～

内容的提问来源于stack exchange，提问作者Sandheep Kumar Patro