javascript - 如何将 Style 应用于 Angular 中的自定义组件内容？

Question

我正在尝试将样式应用于自定义组件的子组件。

选择器:

<custom-component-example></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>

按钮文本不会变绿。样式可以是任何东西(例如字体粗细或大小或任何东西)。

我也试过这个话题的解决方案:

Best way to pass styling to a component

但这也不适用于子元素(上例中的按钮)。

如何传递任何给定的样式并将其应用于子元素，在示例的情况下，我将如何传递样式(通过自定义组件示例选择器)并将其应用于按钮和按钮的文本？

提前致谢。

Answer 1

你永远不应该改变父级的子样式，而这是你应该做的:

将一个类应用到父级(比方说绿色按钮)。在 child 的 CSS 中，您需要检查我的 parent 是否有一个类绿色按钮，如果是，那么它应该改变它的颜色。

在 child 的css文件中->

:host-context(.green-button) button{
color : green
}

你不应该本质上将样式从父级转移到子级，因为它破坏了 Angular 引以为豪的 ViewEncapsulation 优点。这里有一些引用。 : Link

此外，子组件应该负责按钮的外观。 parent 应该关心自己。将来，如果您的 parent 有两个 child ，将很难管理将哪种风格传给哪个 child 。使用这种方法，改变样式不仅容易而且易于管理。

如果我能提供帮助，请点赞并标记为已解决。干杯。