来自父母的角组件自定义样式
来自父母的角组件自定义样式
提问于 2022-06-03 09:42:39
我希望启用自定义CSS变量来自定义我的Ionic应用程序中的组件。
我读过关于使用自定义CSS属性的文章，但是我不知道它是如何工作的。
来自有角的官方文件：
创建一个组件以支持作为组件作者的自定义，您可以显式地设计一个组件，以便以四种不同的方式之一接受自定义。
- 使用CSS自定义属性(推荐)您可以通过使用CSS自定义属性(也称为CSS变量)定义其样式来为您的组件定义受支持的自定义API。任何使用您的组件的人都可以通过为这些属性定义值、自定义组件在呈现页面上的最终外观来使用这个API。
虽然这需要为每个定制点定义一个自定义属性，但它创建了一个清晰的API契约，它适用于所有样式的封装模式。
我试过用@HostBinding
@HostBind('style.--custom-property') customProp;但是我不明白如何将css属性应用到我的组件中。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-06 13:38:48
最后，我找到了解决这个问题的方法：
子组件
.cmp-class {
color: var(--custom-color, red);
}<div class="cmp-class"><p>Hello</p></div>
父组件
child-cmp {
--custom-color: blue;
}<child-cmp></child-cmp>
Stack Overflow用户
发布于 2022-06-29 09:21:25
您可以使用ng深度，例如从父组件使用：
child-cmp ::ng-deep .cmp-class {
color: blue;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72487730
复制相关文章
相似问题
腾讯云开发者
