提问人：Niek Jonkman 提问时间：6/20/2019 更新时间：9/21/2022 访问量：12066
如何在 Angular 中将 Style 应用于自定义组件内容？
How to apply Style to custom component content in Angular?
问：
我正在尝试将样式应用于自定义组件的子组件。
选择器：
<custom-component-example></custom-component-example>
在自定义组件示例.html中：
<button>
<ng-content></ng-content>
</button>
如果我使用这样的风格：
<custom-component-example style="color: green">some text</custom-component-example>
或者像这样：
<custom-component-example [ngStyle]="{'color': green}">some text</custom-component-example>
按钮文本不会变绿。样式可以是任何内容（例如，字体粗细或大小或任何内容）。
我也尝试了这个主题的解决方案：
但这也不适用于子元素（上例中的按钮）。
如何传递任何给定的样式并将其应用于子元素，在示例中，如何传递样式（通过 custom-component-example 选择器）并将其应用于按钮和按钮的文本？
提前致谢。
答：
3赞
Dhaval Patel
6/20/2019
#1
您需要使用 like 将 style 属性传递给子组件@Input()
子组件 HTML 代码应如下所示
<div [className]="tableCss">
</div>
您的子组件 ts 文件代码如下所示
@Input() tableCss: string;
Parent 组件应如下所示
<app-list [tableCss]="'table-responsive table-borderless table-grid mt-4 border-top border-primary'"></app-list>
0赞
mr_alex
6/20/2019
#2
如果您想在不对 css 进行深度选择的情况下使用输入和样式，如下所示：
a > b > c {
color: green;
}
将此类更改为：
class CustomComponentExample {
@Input() styles;
}
设置此输入的样式：
<custom-component-example [styles]="{'color': green}">some text</custom-component-example>
在组件中使用此属性：
<button [ngStyle]="styles">
<ng-content></ng-content>
</button>
5赞
Srinivasan Sekar
6/20/2019
#3
尝试换成styles[styles]
自定义组件示例.html
<button [ngStyle]="styles">
<ng-content></ng-content>
</button>
自定义组件示例.ts
@Input() styles: any = {};
用
<custom-component-example [styles]="{color: green}">some text</custom-component-example>
12赞
ishan srivastava
6/20/2019
#4
你不应该改变父样式的子样式，而是你应该做的：
将类应用于父级（假设绿色按钮）。 在孩子的 css 中，您需要检查我的父母是否有一个类绿色按钮，如果是，那么它应该改变它的颜色。
在孩子的 css 文件 ->
:host-context(.green-button) button{
color : green
}你不应该将样式从父级转移到子级，因为它破坏了 Angular 引以为豪的 ViewEncapsulation 优点。 这里有一些参考.： 链接
此外，子组件应该负责它按钮的外观。父母应该关心自己。将来，如果你要给父母生两个孩子，就很难管理传给哪个孩子什么风格。 使用这种方法，改变风格不仅容易，而且易于管理。
如果我能够提供帮助，请点赞并标记为已解决。干杯。
评论
1赞
Niek Jonkman
6/20/2019
您好，我使用了您的解决方案来解决我的问题。它效果很好，我也尝试了其他一些解决方案，但我无法让它们正常工作。也很欣赏解释。
0赞
Dimitar Stojanovski
9/21/2022
#5
试试这个：
- 将该组件上的类添加到模板文件中，如下例所示。（class='切换按钮'）。
<custom-component-example class="toggle-button"> Button name </custom-component-example>
用于设置此类样式的文件并添加到该参数。
::ng-deepscss!important::ng-deep .toggle-button { .switch-btn { width: 80px !important; height: 40px !important;}}
*“switch-btn”类是父组件中的一个类。
评论