使用 MUI v5，以下代码只工作了一半。第一个按钮为红色（具体来说，边框和文本为红色），但是在悬停时，边框的颜色变为蓝色（样式是从 ButtonGroup 继承的，默认情况下为蓝色）。
如何强制第一个按钮在悬停时保持其红色（来自 theme.palette.error）边框，理想情况下是“mui 5”方式（即使用 sx 或情感或这种性质的东西）？
当前行为：第一个按钮的边框和文本为红色，但悬停时边框变为蓝色。
期望的行为：第一个按钮的边框和文本始终为红色。
非常感谢任何帮助:)
<ButtonGroup variant="outlined">
<Button color="error">
Again
</Button>
<Button>
Good
</Button>
</ButtonGroup>```
您可以为第一个按钮选择按钮组的悬停类，并在其中应用所需的样式。为了给按钮组中的第一个按钮设置样式，Mui 使用了这个选择器MuiButtonGroup-grouped:not(:last-of-type)。通过使用此选择器的伪类hover，您可以自定义包装器 div 中的样式。我已经分叉的一个按钮组的MUI例子在他们的文档的网站，并通过应用CSSsx盒子道具。
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句