ant design Menu折叠箭头修改大小

由于antd原本自带的折叠箭头太小,UI设计要求改大一点,

ant design Menu折叠箭头修改大小_第1张图片

想了很多办法都没办法去改变,后来发现,这个箭头是由左右两部分组成的,及结构为/+\,所以设置宽度且针对平移作出修改,最终修改为16px*16px大小,也算是达成了设计要求,改后效果如下

ant design Menu折叠箭头修改大小_第2张图片

 上代码:

//菜单打开状态/\箭头左/
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before{
  width: 10px;
  transform: rotate(45deg) translateX(4.5px);
}
//菜单打开状态/\箭头右\
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after{
  width: 10px;
  transform: rotate(-45deg) translateX(-4.5px);
}
//菜单收起状态\/箭头左\
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::before, .ant-menu-submenu-inline .ant-menu-submenu-arrow::before{
  width: 10px;
  transform: rotate(-45deg) translateX(4.5px);
}
//菜单收起状态\/箭头右/
.ant-menu-inline-collapsed .ant-menu-submenu-arrow::after, .ant-menu-submenu-inline .ant-menu-submenu-arrow::after{
  width: 10px;
  transform: rotate(45deg) translateX(-4.5px);

视图审查是真的难搞,有很多时候需要想很多办法,希望能帮到同样抓耳挠腮的小伙伴,哈哈,如果有更好的办法建议可以沟通,谢谢! 

你可能感兴趣的:(react,html5,css)