如何为 ButtonGroup 内的 MUI 按钮设置悬停行为

Question

使用MUI v5，下面的代码只有一半的效果。第一个按钮是红色的（具体来说，边框和文本是红色的），但是在悬停时，边框的颜色变为蓝色（样式继承自默认为蓝色的 ButtonGroup）。

如何强制第一个按钮在悬停时保持红色（来自 theme.palette.error）边框，最好是 'mui 5' 方式（即使用 sx 或情感或类似性质的东西）？

当前行为：第一个按钮的边框和文本为红色，但悬停时边框变为蓝色。

期望的行为：第一个按钮的边框和文本始终为红色。

非常感谢任何帮助:)

<ButtonGroup variant="outlined">
  <Button color="error">
    Again
  </Button>
  <Button>
    Good
  </Button>
</ButtonGroup>```

Answer 1

您可以 select 按钮组的第一个按钮悬停 class 并在其中应用您想要的样式。为了给按钮组中的第一个按钮设置样式，Mui 使用 select 或 MuiButtonGroup-grouped:not(:last-of-type)。通过使用此 selector 的伪 class hover，您可以从包装器 div 自定义样式。我已经 forked one the MUI examples for button groups on their docs 网站并通过框中的 sx 道具应用了 css。

<Box
  sx={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      m: 1
    },
    ".MuiButtonGroup-grouped:not(:last-of-type):hover": { // class selector 
      borderColor: "red"
    }
  }}
>
  <ButtonGroup size="small" aria-label="small button group">
    <Button key="one" color="error">
      One
    </Button>
    ,<Button key="two">Two</Button>
  </ButtonGroup>
</Box>

Answer 2

在 Junaid 帮我解答后，我做出了以下决定：

import {
  ButtonGroup,
  buttonGroupClasses,
  Button,
} from '@mui/material';

<ButtonGroup
  sx={{
    [`.${buttonGroupClasses.grouped}:first-child:hover`]: {
      borderColor: (theme) => theme.palette.error.dark,
    },
  }}
  variant="outlined"
>
  <Button
    color="error"
    sx={{
      width: '50%',
    }}
  >
    Again
  </Button>
  <Button sx={{ width: '50%' }}>Good</Button>
</ButtonGroup>

备注：

buttonGroupClasses.grouped 只是 mui 导出的 MuiButtonGroup 分组的常量。
记录了计算的属性名称 here - 我不得不使用它，因为模板文字字符串是一个表达式而不是实际字符串。

如何为 ButtonGroup 内的 MUI 按钮设置悬停行为

How can I set on hover behaviour for a MUI Button inside a ButtonGroup

css

emotion

typescript

reactjs

material-ui