来自父母的 Angular 组件自定义样式

Question

我想启用自定义 CSS 变量来自定义我的 Ionic 应用程序中的组件。

我读到了有关使用自定义 CSS 属性的信息，但我不知道它是如何工作的。

来自Angular 官方文档：

创作组件以支持自定义 作为组件作者，您可以通过四种不同方式之一显式设计组件以接受自定义。

1. 使用 CSS 自定义属性（推荐） 您可以通过使用 CSS 自定义属性（也称为 CSS 变量）定义组件的样式来为组件定义受支持的自定义 API。使用您的组件的任何人都可以通过定义这些属性的值来使用此 API，自定义组件在呈现页面上的最终外观。

虽然这需要为每个自定义点定义自定义属性，但它创建了一个适用于所有样式封装模式的清晰 API 契约。

我尝试使用@HostBinding：

@HostBind('style.--custom-property') customProp;

但我不明白如何将 css 属性从其父组件之一应用到我的组件。

Answer 1

最后我找到了解决这个问题的方法：

子组件

.cmp-class {
  color: var(--custom-color, red);
}

<div class="cmp-class"><p>Hello</p></div>

父组件

child-cmp {
  --custom-color: blue;
}

<child-cmp></child-cmp>