MUI 5.0.2 ButtonGroup内Button的href属性导致右边框样式异常问询

问题结论 #

你描述的属于MUI 5.0.2版本的已知样式Bug，问题根因如下：

• ButtonGroup的默认边框样式使用了:not(:last-of-type)选择器匹配组内非末尾按钮，仅给非末尾按钮隐藏默认右边框，hover状态才显示。
• 带href属性的Button会被渲染为<a>标签，不带href属性的Button会被渲染为<button>标签，二者属于不同的DOM元素类型，导致:last-of-type选择器匹配逻辑失效，才会出现边框显示异常。

修复方案 #

1. 升级MUI到5.1.0及以上版本，该版本已经修复了ButtonGroup的选择器逻辑，改用:not(:last-child)匹配规则，兼容不同标签类型的Button组件
2. 如果暂时无法升级版本，可以添加自定义样式临时兼容：

/* 覆盖ButtonGroup默认边框规则 */
.MuiButtonGroup-root > .MuiButton-root:not(:last-child) {
  border-right-width: 0;
}
.MuiButtonGroup-root > .MuiButton-root:hover:not(:last-child) {
  border-right-width: 1px;
}

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