element ui el-popover 样式修改不生效解决方法

Posted 2023-03-16

参考技术A 在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用
::v-deep
‘>>>’
/deep/
行内Style
这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style

然后在当前文件样式中 不加scoped写一份

element-ui的el-popover挂载问题

参考技术A 首先，el-popover默认挂载在body节点上，也就是说通过查看控制台的html节点时，会发现el-popover与app节点同级。

这个时候就会带来一些麻烦事~

比如说我通过某些方法获取到css变量并注入在form表单节点上，此时我需要修改el-popover弹窗样式，使用css变量以达到更换主题效果。比如下方的wrapperStyle里就包含几十个css变量，但这些变量所挂载的节点是body下的一个表单，表单里有多个级联选择器。

此时使用css变量则不会生效，通过控制台查找，发现body和html节点上并未发现那几十个CSS变量，因此需要将弹窗挂载节点进行更改

element-ui文档在级联选择器那里并未说明哪个属性，但是翻阅文档发现涉及popover弹窗的提及到这么一个属性:popper-append-to-body="false"，设置后即可

此时再去控制台查看，发现级联选择器的弹窗被表单容器包裹，css变量被找到，样式生效。