Reactjs 如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色

我想用material UI(https://i.stack.imgur.com/X0aUV.png)来做这样的事情

我用过ButtonGroup，但我不知道如何更改边框的 colored颜色 .

此时此刻，我有这样的 idea :(https://i.stack.imgur.com/Yg3xZ.png)

我的代码是:

<Grid item lg={4} className={style.navGridCenter}>
  <ButtonGroup variant='text' aria-label='text button group' sx={{ background: '#566673','& .MuiButtonGroup-groupedText':{borderColor:'#fff'}}}>

    <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>

我需要将ButtonGroup的边框 colored颜色 更改为#ffffff. 我试过了，但不管用

sx={{'& .MuiButtonGroup-groupedText':{borderColor:'#fff'}}}