我如何从父组件中设置我的子组件的样式？

Question

我有父组件和子组件。当我在另一个组件中使用我的 html 时，我使用我的 css.

例如我的父组件

HTML

<div class="chips">
    <p class="tags">Tag 1</p>
</div>

CSS

.chips .tags {
   color:red;
}

一切正常。但是当我用另一个组件这样做时

<div class="chips">
    <app-child></app-child>
</div>

HTML 来自子组件

<p class="tags">Tag 1</p>

那我没有得到红色。

我该如何解决这个问题？

Answer 1

您可以将.css放在共享所有应用程序的styles.css中。

另一个选择是使用::ng-deep但是我不太喜欢

最后一个是像这样使用 css 个变量 Netanel Basal's article

//in your parent
.chips app-child{
    --bgcolor:red;
}

//in your child
.tags
{
   background-color:var(--bgcolor,pink) //<--use a "pink" by defect
}

一个fool example

我如何从父组件中设置我的子组件的样式？

How can i style my child components from parent?

html

css

angular-components

angular