Ionic 来自父系的Angular 元件自订型式

r1zk6ea1  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(117)

我想启用自定义CSS变量来自定义我的Ionic应用程序中的组件。
我读过关于使用自定义CSS属性的文章,但我不知道它是如何工作的。
来自Angular官方文件:
编写组件以支持自定义作为组件编写者,您可以显式地设计一个组件,使其以四种不同方式之一接受自定义。
1.使用CSS自定义属性(推荐)通过使用CSS自定义属性(也称为CSS变量)定义组件得样式,可以为组件定义受支持得自定义API.任何使用您得组件得用户都可以使用此API,方法是定义这些属性得值,自定义组件在呈现页面上得最终外观.
虽然这需要为每个自定义点定义一个自定义属性,但它创建了一个在所有样式封装模式下都有效的清晰API协定。
我尝试使用@HostBinding

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

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

j91ykkif

j91ykkif1#

最后我找到了解决这个问题的方法:
子组件
第一个
父组件
第一次

bvhaajcl

bvhaajcl2#

您可以使用ng-deep,例如从父元件用途:

child-cmp ::ng-deep .cmp-class {
  color: blue;
}

相关问题