我想启用自定义CSS变量来自定义我的Ionic应用程序中的组件。
我读过关于使用自定义CSS属性的文章,但我不知道它是如何工作的。
来自Angular官方文件:
编写组件以支持自定义作为组件编写者,您可以显式地设计一个组件,使其以四种不同方式之一接受自定义。
1.使用CSS自定义属性(推荐)通过使用CSS自定义属性(也称为CSS变量)定义组件得样式,可以为组件定义受支持得自定义API.任何使用您得组件得用户都可以使用此API,方法是定义这些属性得值,自定义组件在呈现页面上得最终外观.
虽然这需要为每个自定义点定义一个自定义属性,但它创建了一个在所有样式封装模式下都有效的清晰API协定。
我尝试使用@HostBinding
:
@HostBind('style.--custom-property') customProp;
但是我不明白如何从我的组件的一个父组件中将css属性应用到我的组件。
2条答案
按热度按时间j91ykkif1#
最后我找到了解决这个问题的方法:
子组件
第一个
父组件
第一次
bvhaajcl2#
您可以使用ng-deep,例如从父元件用途: