自定义antdesign组件库中menu菜单的箭头大小

最新推荐文章于 2024-06-10 10:44:33 发布

我不4倒霉蛋˃̶͈˂̶͈

最新推荐文章于 2024-06-10 10:44:33 发布

阅读量419

点赞数 2

文章标签： css3

本文链接：https://blog.csdn.net/weixin_49102222/article/details/138158721

版权

文章讲述了作者如何在处理3840*2160高分辨率屏幕时，通过修改AntMenu的CSS样式，特别是箭头尺寸，以确保上下拉菜单在大屏上显示适配。强调了使用!important来确保自定义样式优先级的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目需要做3840*2160的界面适配，我发现在大屏界面上下拉菜单的箭头显示很小不适配该页面，为了自定义箭头大小，我在main.css全局样式文件中修改了箭头大小，代码如下：

/* menu菜单的箭头样式 */
.ant-menu .ant-menu-submenu-arrow {
    inset-inline-end: 1rem;
}

/* 调整整体偏移量 */
.ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow {
    transform: translateY(-0.25rem);
}

.ant-menu .ant-menu-submenu-arrow {
    transform: translateY(0.25rem);
}

/* 箭头大小 */
.ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before {
    transform: rotate(45deg) translateX(0.28rem) !important;
    width: 0.6rem !important;
}

.ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after {
    transform: rotate(-45deg) translateX(-0.28rem) !important;
    width: 0.6rem !important;
}

.ant-menu-inline .ant-menu-submenu-arrow::before {
    transform: rotate(-45deg) translateX(0.28rem) !important;
    width: 0.6rem !important;
}

.ant-menu-inline .ant-menu-submenu-arrow::after {
    transform: rotate(45deg) translateX(-0.28rem) !important;
    width: 0.6rem !important;
}

需要注意的是在设置大小的时候要加!important不然原生的样式会覆盖自定义的，希望对大家有用~~