MaterialUI的ButtonGroup组件，Button中间的border没有被覆盖是怎么实现的？

Question

这个是MUI官方的Demo：https://gbhhib.csb.app/

可以看到，它的例子中，当hover按钮的时候，按钮中间的那个border是没有被覆盖的

但是我自己尝试实现的时候，和它一样用了margin-left:-1px，我的例子中的border就被后一个按钮覆盖了，是我哪里的样式不对吗？默认情况下应该是会被覆盖的，为什么它的例子中可以做到不被覆盖呢。。
https://codesandbox.io/s/cock...

Answer 1

先来说下他的逻辑

1、首先n个盒子顺序排列，每个盒子都有边框，此时中间两两相邻的盒子边框就显得比较粗了
2、所以，把除第一个盒子之外的盒子向左移动边框的距离，这样中间两两相邻的盒子边框就看起来像是单边框了
3、第三点他写的有点复杂，主要因为他的边框是alpha透明的，也是因为他的边框是透明的，才能实现。
3.1 让除了最后一个盒子的右边框纯透明transparent
3.2 盒子悬停时，设置盒子的边框(需要是不透明色，不然会有叠加色差)

再来说你的问题

1、背景色background-color的设置默认是从边框开始的，也就是会覆盖边框色，所以你需要去掉background-color，或者设置下background-clip
2、.box:not(:last-child)中的右边框颜色应该设置为纯透明transparent，参考上面说的3.1，而你设置成了currentColor
3、缺少了.box:not(:last-child):hover {border-right-color: currentColor;}的样式，其实这个不写也没关系，这个只是为了覆盖2中的transparent，如果你在.box:hover中设置border时加上!important一样能达到效果
4、你的边框是不透明的，不适合这种写法，你可以把.box中的边框颜色设置点透明，就能看到初步效果了

怎么写

通用的写法和上面1、2、3.1都一样，但是3.2，在悬停盒子时，设置下盒子右边框的颜色，同时把下一个盒子的左边框设置为透明transparent就可以了

.box:hover {
  border: 10px solid green;
}
.box:hover + .box{
  border-left-color: transparent;
}

Answer 2

我以前的做法是，在hover的时候把层级提升一下就行了。

MUI 的实现在于它的默认边框颜色是半透明的，所以即使被覆盖了也能看到