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

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

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

然鹅发现并不起作用~
如果用到的是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;
                }

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

在这里插入图片描述

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

这里要注意!这个样式不能写在之前有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>

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值