ElementUI,修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的,所以修改样式时,必须要定义全局样式才能实现样式覆盖,那怎样才能避免全局的样式污染呢?

解决办法:通过给组件添加自定义的 popper-class 属性来避免全局样式污染;

xml 复制代码
<el-cascader
    v-model="showOptions"
    style="height: 36px;width:260px"
    placeholder="显示选项"
    :options="optionsList"
    :props="props"
    collapse-tags
    clearable
    popper-class="dropDownPanel"
></el-cascader>

下拉框的样式设置:

xml 复制代码
<style>
.dropDownPanel{
    background: #123493;
    border: 1px solid rgba(57,106,254,1);
}
.dropDownPanel[x-placement^=bottom] .popper__arrow {
    display: none;
}
.dropDownPanel .el-cascader-menu {
    color: #fff;
    border-right: 1px solid rgba(57,106,254,1);
}
.dropDownPanel .el-cascader-node.in-active-path {
    color: #38B4C1;
    /* background: transparent; */
}
.dropDownPanel .el-cascader-node.is-active {
    color: #38B4C1;
}
.dropDownPanel .el-cascader-node:not(.is-disabled):focus, 
.dropDownPanel .el-cascader-node:not(.is-disabled):hover {
    background-color: #0C0F56!important;
}
</style>

样式修改

xml 复制代码
<style scoped>
/deep/ .el-tag.el-tag--info {
    background-color: #123493;
    border-color: rgba(57,106,254,1);
    color: #FFFFFF;
}
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {
    border-color: rgba(57,106,254,1);
}
</style>
相关推荐
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript