下拉菜单,修改行高和背景色。看了好多贴子,都没用啊
?%ra=linkhttps://www.antdv.com/components/menu-cn#components-menu-demo-horizontal
https://www.antdv.com/components/menu-cn#components-menu-demo-horizontal?%ra=link
就第一个例子,水平的顶部导航菜单。
下拉菜单,修改行高和背景色。看了好多贴子,都没用啊
在控制台找了几乎所有的元素,一个一个试,没辄了 ,就是改不了。
侧边的 menu可以修改,就这个不行。
:deep(.ant-menu-dark){
background-color: rgb(183, 201, 134)!important;
}
// :deep(.ant-menu-item){
// background-color: rgb(0, 255, 42) !important;
// }
:deep(.ant-menu-submenu .ant-menu-item){ //
background-color: rgb(187, 165, 243) !important;
}
:deep(.ant-menu-submenu-popup){ // 这个是上面的
background-color: rgb(143, 234, 255) !important;
}
:deep(.ant-menu-overflow-item){ // 这个是上面的
background-color: rgb(83, 223, 255) !important;
}
:deep(.ant-menu-sub){
background-color: rgb(174, 91, 182) !important;;
}
:deep(.ant-menu-submenu-title){
height: 30px!important;
line-height: 30px!important;
}
:deep(.ant-menu-vertical){
background-color: rgb(185, 42, 42) !important;
}
:deep(.ant-menu-submenu-horizontal){
height: 30px!important;
line-height: 30px!important;
background-color: rgb(185, 42, 42) !important;
}
希望您能用官方原码试试。多谢!
你题目的解答代码如下:
.ant-menu-submenu-popup .ant-menu-item-group-title {
height: 30px!important;
line-height: 30px!important;
background-color: rgb(13, 106, 42) !important;
}
.ant-menu-submenu-popup .ant-menu-item-group-list > li{
height: 30px!important;
line-height: 30px!important;
background-color: rgb(185, 42, 42) !important;
}
如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!
这个链接里的方法你试过了没
看下是否对你有帮助
修改点一 在a-menu标签添加自定义类名aMenuDIY,这样来覆盖antdv的样式
<a-menu mode="horizontal" class="aMenuDIY">
<style lang="scss" scoped>
.aMenuDIY .ant-menu-dark {
background-color: rgb(183, 201, 134) !important;
}
.aMenuDIY .ant-menu-item {
background-color: rgb(187, 165, 243) !important;
}
.aMenuDIY .ant-menu-overflow-item {
background-color: rgb(83, 223, 255) !important;
}
.aMenuDIY .ant-menu-sub {
background-color: rgb(174, 91, 182) !important;
}
.aMenuDIY .ant-menu-submenu-title {
height: 30px !important;
line-height: 30px !important;
}
.aMenuDIY .ant-menu-vertical {
background-color: rgb(185, 42, 42) !important;
}
.aMenuDIY .ant-menu-submenu-horizontal {
height: 30px !important;
line-height: 30px !important;
background-color: rgb(185, 42, 42) !important;
}
</style>
修改点二 创建一个外包的scss文件或者css文件 src\assets\index.scss
在main.js引入作为全局覆盖antdv样式
src\assets\index.scss
.ant-menu-submenu.ant-menu-submenu-popup > .ant-menu{
background-color: rgb(143, 234, 255) !important;
}
main.js
import "./assets/index.scss";
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!