ionic5+angular12 项目ion-popover组件中小箭头颜色无法更改

问题描述：使用ionic组件中的ion-popover，更改其背景颜色时发现小箭头颜色不随之更改（如图所示）

 

解决方法

1，尝试过选中检查页面当前元素来修改它，无效果。提高其优先度也无法使其样式更改。

2，尝试通过深度选择器也无法修改。

最终方案1：找到源代码更改其属性来修改

找到theme下的global.scss文件，在其中添加如下代码（代码样式依据自身设计稿修改）

ion-popover {

  .popover-content {

    width: 220px !important;

    --ion-background-color: black;

    --ion-text-color: rgba(255, 255, 255, 1);;

  }

}

.popover-arrow::after {

  background: black !important;

}

样式优先级还是得加，不然小箭头还是没效果。

随后刷新页面发现样式更改成功！！！

样式图如下:

 

ps：前辈们的案例是老版本的ionic组件，那时没有这个问题。还是忍不住吐槽一下，angular+ionic项目的坑也太多了吧，苦死孩子了，嘤嘤嘤~~~~~~