问题描述
Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的,所以修改样式时,必须要定义全局样式才能实现样式覆盖,那怎样才能避免全局的样式污染呢?
解决方案
通过给组件添加自定义的 popper-class 属性来避免全局样式污染
<el-cascader popper-class="myClass" v-model="regionCodeList" :props="props"> </el-cascader>
<style> .myClass{ background: yellow; } .myClass[x-placement^=bottom] .popper__arrow::after { border-bottom-color: yellow; } </style>