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

Posted 2023-03-13

【中文标题】如何从父组件中设置子组件的样式？

【英文标题】：How can i style my child components from parent?

【发布时间】：2021-09-27 06:48:50

【问题描述】：

我有父子组件。当我在另一个组件中使用我的 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>

然后我没有得到红色。

我该如何解决这个问题？

【问题讨论】：

这能回答你的问题吗？ How to style child components from parent component's CSS file?

不要这样做，IMO 进入子组件，然后设置样式。在您的情况下，子组件有自己的影子 dom，这违反了影子 dom 的原则，应该为组件中的组件定义样式

不，我在那里尝试了答案，但没有成功

【参考方案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

【讨论】：

什么是 - --bgcolor:red ？ --bgcolor 是什么意思？

它是一个变量。您的孩子使用 property:var(--variable_name,valueByDefect) 之类的 CSS，您可以为父级中的变量赋值，在示例中我用作变量“bgcolor”的名称，但您可以使用 wahtever（我添加了一个傻瓜 stackblitz）