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>
复制代码

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

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