ant design menu 上行栏下拉菜单位 样式修改不动,请教

下拉菜单,修改行高和背景色。看了好多贴子,都没用啊
?%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;
}

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img

img

这个链接里的方法你试过了没
看下是否对你有帮助


antd menu 样式修改 - SegmentFault 思否 记录一下antd 中,table 样式修改, 方便大家快速使用基本上按照以下代码修改相应颜色即可 {代码...} 切记: {代码...} https://segmentfault.com/a/1190000040592980

修改点一 在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";
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632