antデザインメニューコンポーネントサブメニューの幅の問題

メニューのサブメニューが親メニューよりも長い

ここに画像の説明を挿入

この写真から、私が書いた幅は役に立たないことがわかります、それは彼自身の最小幅で覆われていることがわかりました

ここに画像の説明を挿入

解決策1は、ant-menu-verticalスタイルを直接変更します

直接修改ant-menu-vertical
建立一个index.less文件,  然后在需要修改的页面引入
:global { 
.ant-menu-vertical {
    min-width: 96px !important;
  }
 }

ここに画像の説明を挿入
ここに画像の説明を挿入

次に、このようになり、明らかに親よりも狭く、幅を調整できます、別の方法があります

ここに画像の説明を挿入

次のコードをMenuコンポーネントに直接追加して、サブコンポーネントを中央に配置します

在 <Menu> 组件中加入下面这行代码, 主要是来调节 子组件定位问题的
builtinPlacements={
            {
                bottomLeft: 
                {
                    points: ['tc', 'bc'], // 子菜单的 "上中" 和 对应菜单的title "下中" 对齐。
                    overflow: {
                      adjustX: 1,
                      adjustY: 1
                    },
                    offset: [0, 5]
                }
            }
        }

ここに画像の説明を挿入

次に、このようになり、これは直接中央に配置され、解決できます

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_44953227/article/details/102521122