el-popover修改样式不生效?

el-popover如何修改样式?

在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式

但是问题来了,今天同事改着改着突然发现添加的层叠样式并不生效,只有添加内联样式才能生效,不应该呀?!且看了dom结构更是惊奇

el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级

遂百度了一下 发现

因为el-popover 和 App.vue组件的div平级,所以需要设置全局style,在标签里,不加scoped就是全局style

然后因为el-popover是独立的div,不要将样式加在嵌套里,也不能用穿透符>>>因为el-popover不在当前组件之内

<style lang="scss">
.el-popover {
    XXXXX
}

.class1 {
    .class2 {
        .class3 {
            XXXX
        }
    }
}
</style>
复制代码

如果不想把所有样式都写成全局style,也可以这样写两个style

<style lang="scss">
.class1 {
    .class2 {
        .class3 {
            XXXX
        }
    }
}
</style>

<style lang="scss" scoped>
.el-popover {
    XXXXX
}
</style>
复制代码

虽然是个小知识点,但感觉还是挺有用的

本人渣渣,希望互相学习,互相进步

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享