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

Question

我有一个父组件:

<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但这也无济于事.

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

Answer 1

更新 - 最新方式

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

更新 - 更新的方式

从 Angular 4.3.0开始,所有穿孔的css组合器都被弃用了.Angular团队推出了一个新的组合器::ng-deep (仍处于实验级别,而不是完整和最终的方式),如下所示,

演示: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>      
    `

老路

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

工作示例: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>      
`

Answer 2

更新3:

::ng-deep也已弃用,这意味着您不应该再这样做了.目前还不清楚这会如何影响您需要从父组件覆盖子组件中的样式的内容.对我而言,如果完全删除它似乎很奇怪,因为这会影响作为库需要覆盖库组件中的样式的库？

如果您对此有任何见解,请发表评论.

更新2:

因为现在/deep/和所有其他阴影穿孔选择器都已弃用.角度下降::ng-deep应该用于替代更广泛的兼容性.

更新:

如果使用Angular-CLI,您需要使用/deep/而不是,>>>否则它将无法工作.

原版的:

在转到Angular2的Github页面并随机搜索"样式"后,我发现了这个问题:Angular 2 - innerHTML样式

据说使用了添加的内容2.0.0-beta.10,选择器>>>和::shadow选择器.

(>>>)(和等效/深/)和:: shadow在2.0.0-beta.10中添加.它们类似于shadow DOM CSS组合器(不推荐使用),仅适用于封装:ViewEncapsulation.Emulated,这是Angular2中的默认值.它们可能也适用于ViewEncapsulation.None但只是被忽略,因为它们不是必需的.在支持跨组件样式的更高级功能之前,这些组合器只是一种中间解决方案.

所以简单地做:

:host >>> .child {}

在parent样式表文件中解决了这个问题.请注意,如上面引用中所述,此解决方案仅在支持更高级的跨组件样式之前才是中间的.

Answer 3

如果你不想使用:: ng-deep,你可以这样做,这似乎是正确的方法:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

然后,您将能够在不需要:: ng-deep的情况下修改组件的css

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}

警告:小心你的组件有很多孩子,你为这个组件编写的CSS可能会影响所有孩子!

Answer 4

有同样的问题,所以如果你使用angular2-cli和scss/sass使用'/ deep /'而不是'>>>',那么最后的选择器还不支持(但是对css很有用).

Answer 5

遗憾的是,似乎已弃用/ deep/selector(至少在Chrome中) https://www.chromestatus.com/features/6750456638341120

简而言之,似乎(目前)没有长期解决方案,除了以某种方式让您的子组件动态地设置事物.

您可以将样式对象传递给您的孩子并通过以下方式应用它:
<div [attr.style]="styleobject">

或者如果您有特定的样式,您可以使用以下内容:
<div [style.background-color]="colorvar">

更多与此相关的讨论:https: //github.com/angular/angular/issues/6511

Answer 6

如果您希望更多地针对实际的子组件而不是您应该执行的操作.这样,如果其他子组件共享相同的类名,则不会受到影响.

Plunker:https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO ？ p = preview

例如:

import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

希望这可以帮助!

codematrix

Answer 7

由于 /deep/、>>> 和 ::ng-deep 均已弃用。最好的方法是在子组件样式中使用以下内容

:host-context(.theme-light) h2 {
  background-color: #eef;
}

这将在子组件的任何祖先中查找主题灯。请参阅此处的文档：https ://angular.io/guide/component-styles#host-context

Answer 8

在Angular中有几个选项可以实现:

1)您可以使用深度css选择器

:host >>> .childrens {
     color: red;
 }

2)你也可以将它设置为Emulated的视图封装更改为默认设置,但可以很容易地更改为使用Shadow DOM本机浏览器实现的Native,在你的情况下你只需要禁用它

例如:`

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    .first {
      color:blue;
    }
    .second {
      color:red;
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
 })
 export class ParentComponent  {
   constructor() {

   }
 }

Answer 9

如果您可以访问子组件代码，我发现传递 @INPUT 变量会更清晰：

这个想法是父母告诉孩子它的外观状态应该是什么，孩子决定如何显示状态。这是一个不错的架构

SCSS方式：

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

更好的方法： - 使用selected变量：

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

Answer 10

您不应为父组件中的子组件元素编写CSS规则，因为Angular组件是一个独立的实体，应明确声明外部可用的内容。如果将来子布局发生变化，散布在其他组件的SCSS文件中的该子组件元素的样式可能会轻易中断，从而使您的样式非常脆弱。这ViewEncapsulation就是CSS的目的。否则，如果您可以将值分配给面向对象编程中任何其他类的某个类的私有字段，则将是相同的。

因此，您应该做的是定义可以应用于子级宿主元素的一组类，并实现子级对它们的响应方式。

从技术上讲，可以按照以下步骤进行：

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

换句话说，您可以使用:hostAngular + CSS类集提供的伪选择器在子组件本身中定义可能的子样式。然后，您可以通过将预定义的类应用于<child>宿主元素来从外部触发这些样式。

Answer 11

实际上，还有另一种选择。这比较安全。您可以使用ViewEncapsulation.None但不会将所有组件样式放入其标签（也称为选择器）中。但是无论如何，总是喜欢一些全局样式以及封装样式。

这是修改后的Denis Rybalka示例：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    parent {
      .first {
        color:blue;
      }
      .second {
        color:red;
      }
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent  {
  constructor() { }
}

Answer 12

截至今天（Angular 9），Angular 使用Shadow DOM将组件显示为自定义 HTML 元素。为这些自定义元素设置样式的一种优雅方式可能是使用自定义 CSS 变量。这是一个通用示例：

class ChildElement extends HTMLElement {
  constructor() {
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    var wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    
    // Create some CSS to apply to the shadow dom
    var style = document.createElement('style');
    
    style.textContent = `
    
      /* Here we define the default value for the variable --background-clr */
      :host {
        --background-clr: green;
      }
      
      .wrapper {
        width: 100px;
        height: 100px;
        background-color: var(--background-clr);
        border: 1px solid red;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// Define the new element
customElements.define('child-element', ChildElement);

/* CSS CODE */

/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */

child-element {
  --background-clr: yellow; 
}

<div>
  <child-element></child-element>
</div>

从上面的代码中我们可以看到，我们创建了一个自定义元素，就像 Angular 为我们对每个组件所做的那样，然后我们从全局范围覆盖自定义元素的阴影根中负责背景颜色的变量.

在 Angular 应用程序中，这可能类似于：

父组件.scss

child-element {
  --background-clr: yellow;
}

子元素.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}