MUI5.0.2中ButtonGroup内IconButton悬停样式异常是否为官方BUG？

该样式异常属于MUI 5.0.2版本的官方BUG。

问题根源 #

MUI 5.0.2版本中ButtonGroup的边框、圆角样式规则使用了:not(:last-of-type)这类基于DOM标签类型的伪类选择器，没有采用MUI专属的组件类名进行匹配，类名应用逻辑存在疏漏。
当ButtonGroup内的子组件渲染出的标签类型不一致时，伪类选择器就会判断失效：

• 带href属性的Button会渲染为<a>标签
• 不带href属性的Button会渲染为<button>标签
• 混合排列IconButton与普通Button时也可能出现标签类型不一致的情况
  选择器匹配失败后，无法给对应位置的组件正确应用圆角、边框样式，最终导致悬停时背景形状出现异常。

临时解决方案 #

• 统一ButtonGroup内所有组件的根标签类型：可以给不带href的按钮添加component="a"属性，或者给带href的按钮添加component="button"属性，保证所有子元素标签类型一致，让伪类选择器可以正常匹配
• 手动给ButtonGroup内首尾位置的按钮添加自定义样式，覆盖默认的圆角、边框规则，不依赖MUI的默认伪类选择逻辑
• 升级到修复了该问题的更高版本MUI，官方后续版本已经调整了样式匹配规则，改用类名选择器替代标签伪类选择器，彻底解决了该问题

内容的提问来源于stack exchange，提问作者Pablo LION