问题:当在对element ui里的el-select下拉选择框 直接在f12工具栏选中类名,再v-deep 进行修改,但是会发现样式并没有穿透,设置的属性并没有生效,且在设置style样式加了scoped
解决:因为要对全局样式修改,首先给el-select 加自定义类名 popper-class=“类名”。当时加了(popper-append-to-body="false"修改选择器的下拉框,下拉框是在body标签的外面,所以要设置:popper-append-to-body=“false”,在菜单的定位出现问题时,可尝试修改该属性,但是没有下拉框的值没了)
之后把这个类名的样式单独放在style全局的标签里 在类名前加v-deep或/deep/就可以对样式进行修改。
<el-select
v-model="majorValue"
placeholder="请选择专业"
popper-class="selectFrom"
@change="changeCurrentVal"
class="custom-select"
>
<el-option
v-for="item in majorList"
:key="item.id"
:label="item.attributeName"
:value="item.attributeName"
>
</el-option>
<style lang="scss">
.selectFrom {
background: #09141d !important;
border: 1px solid #7c8b9a !important;
border-radius: 0;
.popper__arrow {
border-bottom-color: #7c8b9a !important;
}
.popper__arrow::after {
border-bottom-color: #7c8b9a !important;
top: 0 !important;
// margin-top: 2px;
}
}
</style>