修改element组件库中Cascader级联选择器下拉列表的默认样式_cascader 级联选择器修改下拉样式

在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped)，如果css用到less预处理器，想到的第一个解决办法就是用深度选择器">>>"

>>> .el-select-dropdown {
                background-color: #23454b;
                color: red;
                }
1
2
3
4

然鹅发现并不起作用~
如果用到的是sass预处理器，可以用深度选择器"/deep/“或者”::v-deep"（有时候"/deep/“不好使，换成”::v-deep"就好使了，不明白为什么，欢迎大佬们评论区指教）

::v-deep .el-select-dropdown {
                background-color: #23454b;
                color: red;
                }
                
/deep/ .el-select-dropdown {
                background-color: #23454b;
                color: red;
                }
1
2
3
4
5
6
7
8
9

然鹅，还是不起作用
经过某qq学习群内大佬们的一番讨论，最后发现官方文档给出一个属性popper-class，可以自定义一个类名加到Cascader选择器组件上

<el-cascader class="search-train-name"
             v-model="treeValue"
             :options="options"
             @change="handleChange"
             placeholder="部门"
             popper-class="train-tree"></el-cascader>
1
2
3
4
5
6

这里要注意！这个样式不能写在之前有scoped的内联样式中，需要再写一个style样式表，因为在浏览器审查元素时你会发现级联选择器的下拉列表不在app作用域下。

<style lang="scss" >
// 级联选择器样式
.train-tree {
    background-color: #23454b;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 20px;
    border: none;
    box-shadow: 5px 10px 12px 2px rgba(0, 0, 0, 0.27);
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

有什么理解不恰当的地方望大佬评论区指正！