materialui buttongroup 中按钮 border 未被覆盖的实现
在 materialui 的 buttongroup 中，当将按钮排成一排时，中间按钮的边框会被后一个按钮覆盖。然而，官方示例中的按钮边框却不会被覆盖这个问题时有开发人员提出。本文将详细解释这一现象的实现原理，并指导如何解决自己的代码中边框被覆盖的问题。
实现原理
实现这一效果的原理如下：
- 设置除第一个按钮外的所有按钮的 margin-left 为 -1px，这样会将这些按钮向左移动边框的宽度。
- 将最后一个按钮以外的所有按钮的右边界颜色设置为透明 (transparent)，这将隐藏中间按钮的边框部分。
- 当一个按钮处于悬停状态时，将该按钮的边框颜色设置为不透明色，这样就不会与背景色叠加产生不同的颜色。
解决代码中边框覆盖的问题
如果自己尝试使用相同的 margin-left 设置，但按钮边框仍然被覆盖，则可能是以下原因之一：
- 背景色覆盖边框：materialui 中，按钮的背景色默认为从边框开始的，因此会覆盖边框颜色。需要将背景色移除或设置 background-clip。
- 错误的边框颜色：中间按钮的右边界颜色应设置为透明 (transparent)，而不是当前颜色。
- 缺少悬停样式：对于悬停状态，需要设置边框颜色为不透明色。
- 边框不透明：透明边框是该技术的关键，如果边框不透明，将无法实现效果。
通用实现
按照以下通用步骤，即可实现按钮边框不被覆盖的效果：
1. 将除第一个按钮外的所有按钮的 `margin-left` 设为 `-1px`。 2. 将除最后一个按钮外的所有按钮的右边界颜色设为 `transparent`。 3. 为所有按钮的悬停状态设置边框颜色为不透明色。 4. 对于透明边框，在悬停状态下设置按钮的右边界颜色，并同时将下一个按钮的左边界颜色设置为透明。
