如何在React中修改Material UI里ButtonGroup的边框颜色

我懂你想把ButtonGroup里按钮之间的边框改成白色的需求，咱们来一步步解决这个问题。

你之前尝试的样式选择器可能不够精准，导致没生效。Material UI的ButtonGroup中，分组按钮的核心样式类是.MuiButtonGroup-grouped，仅针对text变体的.MuiButtonGroup-groupedText优先级或匹配范围可能没覆盖到所有需要修改的边框。

这里给你调整后的代码，既能精准把边框改成白色，还能优化首尾按钮的边框显示，让整体更贴合你想要的效果：

<Grid item lg={4} className={style.navGridCenter}>
  <ButtonGroup 
    variant='text' 
    aria-label='text button group' 
    sx={{ 
      background: '#566673',
      // 给所有分组内的按钮设置白色边框
      '& .MuiButtonGroup-grouped': {
        borderColor: '#fff',
        borderStyle: 'solid',
        borderWidth: '1px'
      },
      // 去掉第一个按钮的左侧边框，避免整体出现多余外边框
      '& .MuiButtonGroup-grouped:first-child': {
        borderLeft: 'none'
      },
      // 去掉最后一个按钮的右侧边框
      '& .MuiButtonGroup-grouped:last-child': {
        borderRight: 'none'
      }
    }}
  >
    <Tooltip title="Empresa">
      <Button className={style.navCenterBtn} disableRipple id="Empresa" variant='text'>
        Empresa
      </Button>
    </Tooltip>
    <Tooltip title="Local">
      <Button className={style.navCenterBtn} disableRipple id="Localização" variant='text' aria-label='Localização'>
        Localização
      </Button>
    </Tooltip>
    <Tooltip title="Função">
      <Button className={style.navCenterBtn} disableRipple id="Função do Utilizador" variant='text' aria-label='Função do Utilizador'>
        Função do Utilizador
      </Button>
    </Tooltip>
  </ButtonGroup>
</Grid>

另外需要注意：如果你的自定义类style.navCenterBtn里有设置边框相关的样式，可能会覆盖这里的配置。遇到这种情况，可以要么调整自定义类的样式，要么在sx的borderColor后面加上!important（尽量少用，但紧急时可以快速验证效果）。

备注：内容来源于stack exchange，提问作者André