Material UI ButtonGroup组件：避免按钮边框重叠的技巧
使用Material UI的ButtonGroup组件时，如何防止相邻按钮边框重叠是一个常见问题。虽然官方示例演示了优雅的解决方案，但简单的复制粘贴代码往往无法达到相同效果。本文将深入解析官方示例的实现原理，并提供一个通用的CSS解决方案。
官方示例的核心在于：
- 初始状态: 按钮排列紧密，导致边框重叠。
-
边框偏移: 除了第一个按钮，其余按钮向左偏移一个等于边框宽度的距离（例如
margin-left: -1px）。这使得边框看起来像一个整体。 -
透明边框: 这是关键所在。除了最后一个按钮，所有按钮的右边框设置为透明(
border-right-color: transparent)。鼠标悬停时，当前按钮边框颜色变为不透明色（例如currentColor），同时下一个按钮的左边框变为透明，从而避免重叠。
然而，直接复制此逻辑可能无效，原因如下：
-
背景色冲突: 按钮背景色(
background-color)会覆盖边框，导致边框不可见。解决方法是移除背景色或使用background-clip属性控制背景绘制区域。 -
透明边框设置错误:
box:not(:last-child)选择器中，右边框颜色应为transparent，而非currentColor。只有这样，悬停时改变边框颜色才能生效。 -
悬停样式缺失: 官方示例可能使用了类似
box:not(:last-child):hover { border-right-color: currentColor; }的样式，或在.box:hover中使用!important强制覆盖透明设置。 - 边框不透明度: 如果边框不透明度过高，此方法无效。需要设置一定的透明度才能看到效果。
为了实现与官方示例相同的效果，推荐使用以下通用的CSS代码：
.box:hover {
border: 10px solid green; /* 自定义边框样式 */
}
.box:hover + .box {
border-left-color: transparent;
}
这段代码在鼠标悬停时改变当前按钮的边框颜色，并使下一个按钮的左边框透明，巧妙地避免了边框重叠。 请根据实际情况调整边框宽度和颜色。
