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