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

Z时代
2024-01-10
分类：问答

我有一个父组件：

<parent></parent>

我想用子组件填充该组：

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板：

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子模板：

<div class="child">Test</div>

由于parent和child是两个独立的组件，因此它们的样式被锁定在自己的范围内。

在父组件中，我尝试执行以下操作：

.parent .child {
  // Styles for child
}

但是.child样式没有被应用到child组件。

我尝试使用styleUrls将parent的样式表包含到child组件中来解决范围问题：

// child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ]

但这无济于事，还尝试了另一种方法，即将child样式表提取到其中，parent但这也无济于事。

那么，如何设置父组件中包含的子组件的样式？

回答：

更新-最新方式

如果可以避免，请不要这样做。正如Devon Sans在评论中指出的那样：该功能很可能已被弃用。

更新-较新的方式

从，不推荐使用所有可穿透的CSS组合器。Angular团队推出了一种新的组合器，如下所示，

styles: [
    `
     :host { color: red; }
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],
template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

旧方法

您可以使用encapsulation mode和/或piercing CSS combinators >>>, /deep/ and::shadow

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],
template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`