一、样式穿透不生效？

---

最近在开发vue3+vant3的H5页面项目时，遇到一个小问题，在此简单记录一下

van-popover组件使用样式穿透不生效？

代码如下

<van-popover
    v-model:show="showPopover"
    :actions="actions"
    theme="dark"
    placement="bottom-end"
    class="popover-wrap"
    @select="onSelect"
    >
</van-popover>

因为项目使用了scss，样式穿透代码如下:

  :deep(.van-popover__content) {
    background: red;
  }

背景色没变，那换一种样式穿透写法

  ::v-deep .van-popover__content {
    background: red;
  }

背景色没变依然没变，所以应该不是样式穿透的问题

二、尝试解决

---

再次翻看了一下vant3的官网，发现可以修改它定义的CSS变量

<style lang="scss">
:root {
  --van-popover-dark-background-color: #2a3148;
  --van-padding-md: 0;
  --van-popover-action-width: 93px;
  --van-popover-dark-text-color: #959db7;
  --van-gray-7: #1a1f30;
}
</style>

开发环境起作用了，以为万事大吉

三、再次遇到问题

---

上到测试环境后，UI说，有个气泡框没按UI要求去做？

我想怎么会呢？眼见为实，还真是样式穿透前的样子

打包以后样式穿透失效了，看来这个方法不行

四、再次尝试解决

---

审视一下气泡的页面元素，发现气泡框和页面挂载id为app的div在同一个层级

尝试修改全局样式，为了避免样式污染整个项目，

在van-popover包一层class="popover-wrap"

使用子元素选择器，在去修改样式

<style lang="scss">
.popover-wrap > .van-popover__content {
  background: #2a3148 !important;

  .van-popover__action {
    padding: 0;
    width: 93px;
    color: #959db7;
  }

  .van-popover__action-text:after {
    border-color: #1a1f30;
  }
}

.popover-wrap > .van-popover__arrow {
  color: #2a3148 !important;
}
</style>

经验证开发环境和打包以后的测试环境都没问题