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

Posted 2023-03-15

【中文标题】如何为 ButtonGroup 内的 MUI 按钮设置悬停行为

【英文标题】：How can I set on hover behaviour for a MUI Button inside a ButtonGroup

【发布时间】：2021-11-14 23:23:12

【问题描述】：

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

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

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

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

非常感谢任何帮助:)

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

【参考方案1】：

您可以为第一个按钮选择按钮组的悬停类，并在其中应用您想要的样式。为了给按钮组中的第一个按钮设置样式，Mui 使用了这个选择器MuiButtonGroup-grouped:not(:last-of-type)。通过使用此选择器的伪类hover，您可以自定义包装器 div 的样式。我在他们的docs 站点上提供了forked 一个按钮组的MUI 示例，并通过框中的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>

【讨论】：

感谢您为我指明了正确的方向！我从你的回答中学到了一些 css（或类似 css 的东西），以及如何使用那些 MUI Global 类。

太好了……

【参考方案2】：

在朱奈德帮我解答后，我决定如下：

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-grouped 的常量。 计算的属性名称记录在 here - 我不得不使用它，因为模板文字字符串是表达式而不是实际字符串。