ant design Menu组件子菜单宽度问题

Menu二级子菜单 比父级菜单长

从这张图可以看到我写的width也没用,原来是被他自带的min-width覆盖了

解决办法一 直接修改ant-menu-vertical样式

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

然后就变成这样了,很显然比父级要窄,可以调节一下宽度就行了,还有一个办法

直接在Menu组件中加入下面代码,可以让子组件居中

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

然后就变成这样了,这是直接居中的, ok解决