el-dropdown自定义样式,不影响其他组件

原来的样式: 修改后的样式:

el-dropdown-menu 添加类名dropdown-menu

html 复制代码
<el-dropdown-menu slot="dropdown" class="dropdown-menu">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="setting = true">
            <span>布局设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>

打开F12看一下元素

我们添加的类名与.el-dropdown-menu在同一层,所以修改背景色啥的就可以直接用自定义的类名修改,但是像里层的.el-dropdown-menu__item得加上自定义的类名

切记:写在style标签内,不要scoped

css 复制代码
<style>
/* 修改背景色以及border颜色*/
.dropdown-menu {
  background-color: #445081;
  border-color: #445081;
}
/* 修改小三角的样式 这里自定义类名与第三方组件的类中间一定不要有空格,不然更改无效!!!*/
.dropdown-menu.el-popper[x-placement^="bottom"] .popper__arrow::after,
.dropdown-menu.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #445081;
}
.dropdown-menu.el-dropdown-menu--medium
  .el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
  height: 0;
}
/* 修改每一项的字体颜色,这里因为是里层的类,所以中间要加上空格!!!*/
.dropdown-menu .el-dropdown-menu__item--divided {
  border-top-color: #606266;
}
.dropdown-menu .el-dropdown-menu__item {
  color: #a8bfd5;
}
.dropdown-menu .el-dropdown-menu__item:hover {
  background-color: #3b4674;
}
</style>
相关推荐
mapbar_front16 分钟前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie37 分钟前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀42 分钟前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻1 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树1 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔1 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04122 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj502 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中2 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略2 小时前
web vue之状态管理Pinia
前端·javascript·vue.js