满口金牙 2022-05-16 16:17 采纳率: 91.1%
浏览 84
已结题

Ant desgin vue 的样式这么难改?,错在哪?

?%ra=linkhttps://www.antdv.com/components/dropdown-cn 官网代码地址,下面这个例子

img


官方的属性

img

于是我改!样式一点没变,咋整?
这几天换ant,被样式修改弄晕了



<template>

 <a-dropdown 
 overlayClassName='dropdown'
>  
 <!-- overlayClassName={styles.dropdown} 这样写也没用-->
...略 
</a-dropdown>

</template>



<style lang="scss" scoped>
  :deep(.ant-dropdown-menu-item){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-item-only-child){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-submenu-title){
    color: red!important;
    background-color: red!important;
  }
  :deep(.ant-dropdown-menu-vertical){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-root){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-title-content){
    color: red!important;
    background-color: red!important;
  }
    
  :deep(.ant-dropdown-menu-submenu-title){
    color: red!important;
    background-color: red!important;
  }
  :deep(.ant-dropdown-menu-vertical){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-root){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-submenu){
    color: red!important;
    background-color: red!important;
  }
  
.dropdown{
//ant-dropdown-menu-item ant-dropdown-menu-item-only-child :deep(.ant-dropdown-menu-item){
  :deep(.ant-dropdown-menu-item-only-child){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-submenu-title){
    color: red!important;
    background-color: red!important;
  }
  :deep(.ant-dropdown-menu-vertical){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-root){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-title-content){
    color: red!important;
    background-color: red!important;
  }
    
  :deep(.ant-dropdown-menu-submenu-title){
    color: red!important;
    background-color: red!important;
  }
  :deep(.ant-dropdown-menu-vertical){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-root){
    background-color: red!important;
    color: red!important;
  }
  :deep(.ant-dropdown-menu-submenu){
    color: red!important;
    background-color: red!important;
  }
}
</style>

  • 写回答

5条回答 默认 最新

  • 关注

    你要改什么样式

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 5月24日
  • 已采纳回答 5月16日
  • 创建了问题 5月16日

悬赏问题

  • ¥15 在误装Windows server2019 后如何利用Windows.old恢复?
  • ¥20 代码实现状态连接包过滤防火墙的设计与实现
  • ¥15 vscode的红色箭头爆红和has no default export报错
  • ¥15 关于#sql#的问题:#情况描述 在用vs对项目进行调试时,出现找不到网络路径,然后查看SQL配置工具,发现SQL服务显示远程调用过程失败(相关搜索:防火墙)
  • ¥15 eNSP中基于默认路由及浮动路由的公司与分部互联和校园网综合项目
  • ¥15 主要进行描述泥浆在管路不同区段泥浆的密度不相同,泥浆的密度有高有低,此时管路的摩阻分布需要怎么计算,(标签-matlab)
  • ¥40 通过编制程序计算圆管内层流充分发展对流换热,参数如图5-4,以及公式5-16所示,要求用表5-6对程序计算准确性进行验证
  • ¥20 该学习哪个编程语言? AI会取代程序员吗?
  • ¥15 ensp如何拼通IP地址
  • ¥15 saber软件导入Ibis模型报错