MaterialUI 的 ButtonGroup 组件， Button 中间的 border 没有被覆盖是怎么实现的？
csdoker · 2022-08-30 21:09:27 +08:00 · 606 次点击这是一个创建于 816 天前的主题，其中的信息可能已经有所发展或是发生改变。
这个是 MUI 官方的 Demo： https://gbhhib.csb.app/
它的例子中，当 hover 按钮的时候，按钮中间的那个 border 是没有被覆盖的
但是我自己尝试实现的时候，和它一样用了`margin-left:-1px`，我的例子中的 border 就被后一个按钮覆盖了，是我哪里的样式不对吗？默认情况下应该是会被覆盖的，为什么它的例子中可以做到不被覆盖呢。。
https://codesandbox.io/s/cocky-waterfall-ry1gn6
它的例子中，当 hover 按钮的时候，按钮中间的那个 border 是没有被覆盖的
但是我自己尝试实现的时候，和它一样用了`margin-left:-1px`，我的例子中的 border 就被后一个按钮覆盖了，是我哪里的样式不对吗？默认情况下应该是会被覆盖的，为什么它的例子中可以做到不被覆盖呢。。
https://codesandbox.io/s/cocky-waterfall-ry1gn6
 |
1
yly9306 2022-08-31 15:22:26 +08:00
貌似是因为官方的 Demo 中 Hover 态的颜色只是 alpha 通道变为不透明了，实际上右边的边框层级还是比较高的
https://codesandbox.io/s/angry-pine-qkipcf?file=/src/styles.css 实际中应该可以用 z-index 解决 |
Select Language