element-ui修改el-dialog内部组件的样式不生效

在使用 el-dialog 组件时,如果el-dialog内部使用了el-select,发现无法改变el-select的样式
无论是使用 ::v-deep 又或者是 :deep() 以及 !important 都无法解决

解决过程

查阅了一些博客,基本都是说使用样式穿透,但是并没有什么作用!
虽然设置全局样式,可以起作用,但是这样就会污染全局样式,并不是一个好的选择!
后面发现,el-select默认挂在在了body上,和当前页面不在一起,就导致了当设置<style lang="scss" scoped>样式无效。

解决方案

el-select添加下面2个属性:

1
2
popper-class = "selectStyle"
:popper-append-to-body = "false" # 关键

并在css中设置

1
2
3
/deep/ .el-select-dropdown__wrap.el-scrollbar__wrap {
overflow: auto;
}

这样就解决了问题,el-popover也是如此。