如何从父组件的 CSS 文件中设置子组件的样式? [英] How to style child components from parent component's CSS file?

问题描述

我有一个父组件:

我想用子组件填充这个组:

<孩子></孩子><孩子></孩子><孩子></孩子></父母>

父模板:

<!-- 孩子们去这里--><ng-content></ng-content>

子模板:

Test

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

在我的父组件中，我尝试这样做:

.parent .child {//孩子的样式}

但是 .child 样式没有应用于 child 组件.

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

//child.component.ts样式网址:['./parent.component.css','./child.component.css',]

但这没有帮助，还尝试了另一种方式，将 child 样式表提取到 parent 中，但这也无济于事.

那么如何为包含在父组件中的子组件设置样式?

解决方案

更新 - 最新方式

如果可以避免，请不要这样做.正如 Devon Sans 在评论中指出的那样:此功能很可能会被弃用.

上次更新

从 Angular 4.3.0 到现在(Angular 12.x)，所有穿孔 css 组合器都被弃用了.Angular 团队引入了一个新的组合器::ng-deep，如下所示，

演示:https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=预览

样式:[`:主机{颜色:红色；}:host ::ng-深父{颜色:蓝色；}:host ::ng-深子{颜色为橙色;}:host ::ng-deep child.class1 {颜色:黄色；}:host ::ng-deep child.class2{颜色:粉红色；}`],模板:`Angular2//红色<父母>//蓝色<孩子></孩子>//橘子<child class="class1"></child>//黄色<child class="class2"></child>//粉色的</父母>`

<小时>

老方法

您可以使用封装模式和/或穿透CSS组合器>>>、/deep/和::shadow

工作示例:http://plnkr.co/edit/1RBDGQ?p=preview

样式:[`:主机{颜色:红色；}:host >>>父母{颜色:蓝色；}:host >>>孩子{颜色为橙色;}:host >>>child.class1 {颜色:黄色；}:host >>>child.class2{颜色:粉红色；}`],模板:`Angular2//红色<父母>//蓝色<孩子></孩子>//橘子<child class="class1"></child>//黄色<child class="class2"></child>//粉色的</父母>`

I've got a parent component:

<parent></parent>

And I want to populate this group with child components:

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

Parent template:

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

Child template:

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

Since parent and child are two separate components, their styles are locked to their own scope.

In my parent component I tried doing:

.parent .child {
  // Styles for child
}

But the .child styles are not getting applied to the child components.

I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:

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

But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.

So how do you style child components that are included into a parent component?

解决方案

Update - Newest Way

Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.

Last Update

From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

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>      
    `

---

Old way

You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow

working example : http://plnkr.co/edit/1RBDGQ?p=preview

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>      
`

这篇关于如何从父组件的 CSS 文件中设置子组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！