V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
csdoker
V2EX  ›  问与答

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

  •  
  •   csdoker · 2022-08-30 21:09:27 +08:00 · 604 次点击
    这是一个创建于 814 天前的主题,其中的信息可能已经有所发展或是发生改变。
    这个是 MUI 官方的 Demo: https://gbhhib.csb.app/
    它的例子中,当 hover 按钮的时候,按钮中间的那个 border 是没有被覆盖的

    但是我自己尝试实现的时候,和它一样用了`margin-left:-1px`,我的例子中的 border 就被后一个按钮覆盖了,是我哪里的样式不对吗?默认情况下应该是会被覆盖的,为什么它的例子中可以做到不被覆盖呢。。
    https://codesandbox.io/s/cocky-waterfall-ry1gn6
    1 条回复    2022-08-31 15:22:26 +08:00
    yly9306
        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 解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1172 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:14 · PVG 02:14 · LAX 10:14 · JFK 13:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.