在 Ionic Vue 中仅更改 ion-page 元素的背景颜色，而不是后代元素

问题描述

我有一个 Ionic Vue3 应用程序。我想更改整个页面的背景颜色。我是 Ionic 的新手，但我相信必须这样做（由于使用 Web 组件/Shadow DOM）是修改 --ion-background-color CSS 自定义属性，而不是尝试设置正常的值CSS 属性，所以这有效：

.ion-page {
  --ion-background-color: red;
}

...但这不是：

.ion-page {
  background-color: red;
}

很好，所以我做了前者，但现在的问题是页面中的所有元素（<ion-page></ion-page> 元素中使用相同自定义属性值的所有元素现在都继承相同的背景颜色。

有谁知道如何确定 ion-page 元素背景颜色的变化范围，使其不会通过后代元素级联？谢谢:)

解决方法

这里的解决方案是使用本地 CSS 自定义属性 --background 而不是全局属性 --ion-background-color。所以以下工作：

.ion-page {
  --background: red;
}

我之前没有意识到不同的作用域有不同的 CSS 变量集。