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

心已赠人 2021-09-20 19:24 1037阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 4]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 5]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/9528a7ae70aa45faac81b65001135019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]: /images/20210920/c60c11fc6a6048e0a9c2e447c370a427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]: /images/20210920/9f3afccf827d4dbebbdb6d1809dd4ad3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 3]: /images/20210920/227351af6b514bca9dc610cc10defe94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 4]: /images/20210920/14f5f34e816c435aaf9f1e058ea6c373.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 5]: /images/20210920/6d1db1774a684757b5565543ff8430dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 6]: /images/20210920/114a3b67fa344eab81cd0eb24649e8df.png