来自父母的角度组件自定义样式

Question

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

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

来自Angular official docs:

编写组件以支持自定义 作为组件作者，您可以明确地设计组件以接受四种不同方式之一的自定义。

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>