如何为Material UI的ToggleButton组件设置边框颜色？

你的自定义边框色被高优先级样式覆盖了：

• 你在ToggleButtonGroup的自定义代码里，给子选择器& .MuiToggleButtonGroup-grouped设置了borderColor: 'unset'，且附带!important标记，这个选择器作用在内部的ToggleButton上，优先级高于你直接给ToggleButton写的样式，直接把你设置的边框色重置掉了。
• MUI默认对ToggleButtonGroup内的按钮做了相邻边框处理：非首尾按钮会默认去掉一侧边框、重置圆角，这部分默认逻辑也会干扰你自定义的边框效果。

方案1：在ToggleButtonGroup层统一配置（推荐，适配你现有代码结构） #

直接修改已有的GenderBoxStyle代码，删掉冲突的borderColor: 'unset'配置，统一在分组选择器下配置各状态的边框颜色即可，不需要在子ToggleButton上重复写边框属性：

const GenderBoxStyle = styled(ToggleButtonGroup)(({ theme }) => ({
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'flex-start',
  alignItems: 'center',
  padding: 0,
  gap: theme.spacing(3),
  paddingLeft: theme.spacing(3),
  border: 'unset !important',
  '& .MuiToggleButtonGroup-grouped': {
    border: '1px solid !important',
    borderRadius: theme.spacing(2),
    // 删除原代码里的 borderColor: 'unset'，替换为以下状态配置
    borderColor: theme.palette.grey[100], // 默认状态边框色
    color: theme.palette.text.primary,
    // 覆盖MUI默认相邻按钮的边框、圆角逻辑
    '&:not(:first-of-type)': {
      borderRadius: theme.spacing(2),
      borderLeft: '1px solid !important',
    },
    // hover态边框色
    '&:hover': {
      borderColor: theme.palette.primary.main,
    },
    // 选中态边框色
    '&.Mui-selected': {
      borderColor: theme.palette.primary.main,
      '&:hover': {
        borderColor: theme.palette.primary.dark,
      }
    }
  },
}));

// 精简ToggleButtonStyle，删除重复的边框配置避免冲突
const ToggleButtonStyle = styled(ToggleButton)(({ theme }) => ({
  color: theme.palette.text.primary,
  px: 3,
  cursor: 'pointer',
  borderRadius: theme.spacing(2),
  width: 168,
  height: 48,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: 0,
}));

方案2：直接在ToggleButton组件上配置（需提升样式优先级） #

如果你需要单独给每个ToggleButton设置边框色，需要在自定义样式里命中MuiToggleButtonGroup-grouped类名，覆盖父组件下发的样式：

const ToggleButtonStyle = styled(ToggleButton)(({ theme }) => ({
  color: theme.palette.text.primary,
  px: 3,
  cursor: 'pointer',
  borderRadius: theme.spacing(2),
  width: 168,
  height: 48,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: 0,
  // 提升优先级覆盖分组默认样式
  '&.MuiToggleButtonGroup-grouped': {
    border: '1px solid !important',
    borderColor: theme.palette.grey[100],
    borderLeft: '1px solid !important',
    '&:hover': {
      borderColor: theme.palette.primary.main,
    },
    '&.Mui-selected': {
      borderColor: theme.palette.primary.main,
    }
  }
}));

• 不要同时在ToggleButtonGroup和内部ToggleButton上写带!important的border属性，很容易出现优先级互相覆盖的问题
• 如果需要匹配选中态的填充效果，可以在&.Mui-selected配置里补充backgroundColor属性，调整为你需要的浅色背景即可。

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