Material UI 和 React 如何为子菜单创建分支线？

Question

你好，我是 MUI 和 React 的新手，想看看是否有办法获得子菜单的这个“分支线”？ 我附上了照片以供参考，其中“设置”在子子菜单中有一条分支线

谢谢！！

Answer 1

您需要定制它 这是我如何制作这个的示例

.sidebar-submenu-branch {
    position: absolute;
    top: 0px;
    left: 18px;
    height: calc(100% - 35px);
    width: 2px;
    background: #F1F5F9;
}

                    <div className="sidebar-submenu-branch" />

这是垂直线，然后我也将其附加到每个元素的绝对位置

                        <svg className="sidebar-submenu-branch-line" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <mask id="path-1-inside-1_721_12665" fill="white">
                                <path d="M0 0H13V8H8C3.58172 8 0 4.41828 0 0Z" />
                            </mask>
                            <path d="M0 0H13H0ZM13 10H8C2.47715 10 -2 5.52285 -2 0H2C2 3.31371 4.68629 6 8 6H13V10ZM8 10C2.47715 10 -2 5.52285 -2 0H2C2 3.31371 4.68629 6 8 6V10ZM13 0V8V0Z" fill="#F1F5F9" mask="url(#path-1-inside-1_721_12665)" />
                        </svg>