Tôi đã có một thành phần cha mẹ:

<parent></parent>

Và tôi muốn đưa vào nhóm này các thành phần con:

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

Mẫu phụ huynh:

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

Mẫu con:

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

Vì parentvà childlà hai thành phần riêng biệt, nên kiểu dáng của chúng bị khóa trong phạm vi riêng của chúng.

Trong thành phần cha mẹ tôi đã thử làm:

.parent .child {
  // Styles for child
}

Nhưng các .childphong cách không được áp dụng cho các childthành phần.

Tôi đã thử sử dụng styleUrlsđể đưa biểu parentđịnh kiểu vào childthành phần để giải quyết vấn đề phạm vi:

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

Nhưng điều đó không giúp được gì, cũng đã thử cách khác bằng cách tìm nạp biểu childđịnh kiểu vào parentnhưng điều đó cũng không giúp được gì.

Vậy làm thế nào để bạn định kiểu các thành phần con được bao gồm trong một thành phần cha mẹ?

Cập nhật - Cách mới nhất

Đừng làm điều đó, nếu bạn có thể tránh nó. Như Devon Sans chỉ ra trong các bình luận: Tính năng này rất có thể sẽ bị phản đối.

Cập nhật - Cách mới hơn

Từ Angular 4.3.0 , tất cả các tổ hợp css xuyên thấu đều không được chấp nhận. Nhóm Angular đã giới thiệu một tổ hợp mới ::ng-deep (vẫn ở cấp độ thử nghiệm và không phải là cách đầy đủ và cuối cùng) như được hiển thị bên dưới,

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

Cách cũ

Bạn có thể sử dụng encapsulation modevà / hoặcpiercing CSS combinators >>>, /deep/ and ::shadow

ví dụ làm việc: 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>      
`

CẬP NHẬT 3:

::ng-deepcũng không được chấp nhận điều đó có nghĩa là bạn không nên làm điều này nữa. Không rõ điều này ảnh hưởng đến những thứ mà bạn cần ghi đè kiểu trong các thành phần con từ thành phần cha. Đối với tôi có vẻ kỳ lạ nếu điều này bị xóa hoàn toàn bởi vì điều này sẽ ảnh hưởng đến mọi thứ như các thư viện nơi bạn cần ghi đè các kiểu trong một thành phần thư viện?

Bình luận nếu bạn có bất kỳ cái nhìn sâu sắc trong này.

CẬP NHẬT 2:

Vì /deep/và tất cả các bộ chọn xuyên bóng khác hiện không được chấp nhận. Angular drop ::ng-deepnên được sử dụng thay thế cho khả năng tương thích rộng hơn.

CẬP NHẬT:

Nếu sử dụng Angular-CLI, bạn cần sử dụng /deep/thay vì >>>nếu không nó sẽ không hoạt động.

NGUYÊN:

Sau khi vào trang Github của Angular2 và thực hiện tìm kiếm ngẫu nhiên cho "phong cách", tôi đã tìm thấy câu hỏi này: Angular 2 - kiểu dáng trongHTML

Mà nói để sử dụng một cái gì đó đã được thêm vào 2.0.0-beta.10, >>>và ::shadowbộ chọn.

(>>>) (và bóng tương đương / sâu /) và :: đã được thêm vào trong 2.0.0-beta.10. Chúng tương tự như các tổ hợp CSS DOM bóng tối (không dùng nữa) và chỉ hoạt động với đóng gói: ViewEncapsulation.Emulation là mặc định trong Angular2. Họ có thể cũng làm việc với ViewEncapsulation.None nhưng sau đó chỉ bị bỏ qua vì không cần thiết. Các tổ hợp này chỉ là một giải pháp trung gian cho đến khi các tính năng nâng cao hơn cho kiểu dáng thành phần chéo được hỗ trợ.

Vì vậy, chỉ cần làm:

:host >>> .child {}

Trong parenttập tin bản định kiểu đã giải quyết vấn đề. Xin lưu ý, như đã nêu trong trích dẫn ở trên, giải pháp này chỉ là trung gian cho đến khi kiểu dáng thành phần chéo tiên tiến hơn được hỗ trợ.

Bạn KHÔNG nên sử dụng ::ng-deep, nó không được dùng nữa. Trong Angular, cách thích hợp để thay đổi phong cách thành phần của trẻ em từ cha mẹ là sử dụng encapsulation(đọc cảnh báo dưới đây để hiểu hàm ý):

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

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

Và sau đó, bạn sẽ có thể sửa đổi mẫu css thành phần của mình mà không cần từ :: ng-deep

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

CẢNH BÁO: Làm điều này sẽ làm cho tất cả các quy tắc css bạn viết cho thành phần này là toàn cầu.

Để giới hạn phạm vi của css của bạn chỉ với thành phần này, hãy thêm một lớp css vào thẻ trên cùng của thành phần của bạn và đặt css của bạn "bên trong" thẻ này:

template:
    <div class='my-component'>
      <child-component class="first">First</child>
    </div>,

Tập tin Scss:

.my-component {
  // All your css goes in there in order not to be global
}

Đáng buồn thay, có vẻ như / deep / selector không được dùng nữa (ít nhất là trong Chrome) https://www.chromestatus.com/features/6750456638341120

Nói tóm lại, có vẻ như (hiện tại) không có giải pháp lâu dài nào ngoài việc bằng cách nào đó khiến thành phần con của bạn tạo kiểu mọi thứ một cách linh hoạt.

Bạn có thể truyền một đối tượng kiểu cho con bạn và áp dụng nó qua:
<div [attr.style]="styleobject">

Hoặc nếu bạn có một kiểu cụ thể, bạn có thể sử dụng một cái gì đó như:
<div [style.background-color]="colorvar">

Thêm thảo luận liên quan đến vấn đề này: https://github.com/angular/angular/issues/6511

Có cùng một vấn đề, vì vậy nếu bạn đang sử dụng angular2-cli với scss / sass, hãy sử dụng '/ deep /' thay vì '>>>', bộ chọn cuối cùng chưa được hỗ trợ (nhưng hoạt động rất tốt với css).

Nếu bạn muốn được nhắm mục tiêu đến thành phần con thực tế hơn bạn nên làm theo. Theo cách này, nếu các thành phần con khác có cùng tên lớp, chúng sẽ không bị ảnh hưởng.

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

Ví dụ:

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 {}

Hi vọng điêu nay co ich!

codematrix

Trên thực tế có thêm một lựa chọn. Mà là khá an toàn. Bạn có thể sử dụng ViewEncapsulation.None BUT đặt tất cả các kiểu thành phần của bạn vào thẻ của nó (còn gọi là bộ chọn). Nhưng dù sao luôn luôn thích một số phong cách toàn cầu cộng với phong cách đóng gói.

Dưới đây là ví dụ sửa đổi của 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() { }
}

Có một vài lựa chọn để đạt được điều này trong Angular:

1) Bạn có thể sử dụng bộ chọn css sâu

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

2) Bạn cũng có thể thay đổi đóng gói chế độ xem được đặt thành Được mô phỏng làm mặc định nhưng có thể dễ dàng thay đổi thành Bản địa sử dụng triển khai trình duyệt gốc Shadow DOM, trong trường hợp của bạn, bạn chỉ cần tắt nó

Ví dụ: `

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() {

   }
 }

Bạn không nên viết các quy tắc CSS cho các thành phần thành phần con trong thành phần cha mẹ, vì thành phần Angular là một thực thể khép kín sẽ khai báo rõ ràng những gì có sẵn cho thế giới bên ngoài. Nếu bố cục con thay đổi trong tương lai, kiểu của bạn cho các thành phần thành phần con đó nằm rải rác trên các tệp SCSS của các thành phần khác có thể dễ dàng bị phá vỡ, do đó làm cho kiểu dáng của bạn rất dễ vỡ. Đó là những gì ViewEncapsulationdành cho trường hợp CSS. Mặt khác, nó sẽ giống nhau nếu bạn có thể gán giá trị cho các trường riêng của một số lớp từ bất kỳ lớp nào khác trong Lập trình hướng đối tượng.

Do đó, điều bạn nên làm là xác định một nhóm các lớp bạn có thể áp dụng cho phần tử máy chủ con và thực hiện cách trẻ phản ứng với chúng.

Về mặt kỹ thuật, nó có thể được thực hiện như sau:

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

Nói cách khác, bạn sử dụng :hostbộ chọn giả được cung cấp bởi tập hợp các lớp CSS của Angular + để xác định các kiểu con có thể có trong chính thành phần con. Sau đó, bạn có khả năng kích hoạt các kiểu đó từ bên ngoài bằng cách áp dụng các lớp được xác định trước cho <child>phần tử máy chủ.

Tôi thấy việc chuyển một biến @INPUT sẽ sạch hơn rất nhiều nếu bạn có quyền truy cập vào mã thành phần con:

Ý tưởng là cha mẹ nói cho trẻ biết trạng thái của nó là gì và trẻ quyết định cách hiển thị trạng thái. Đó là một kiến ​​trúc đẹp

Cách SCSS:

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

Cách tốt hơn: - sử dụng selectedbiến:

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

Cho đến ngày hôm nay (Angular 9), Angular sử dụng Shadow DOM để hiển thị các thành phần dưới dạng các thành phần HTML tùy chỉnh . Một cách thanh lịch để định kiểu các yếu tố tùy chỉnh đó có thể là sử dụng các biến CSS tùy chỉnh . Đây là một ví dụ chung:

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>

Như chúng ta có thể thấy từ đoạn mã trên, chúng ta tạo một phần tử tùy chỉnh, giống như Angular sẽ làm cho chúng ta với mọi thành phần, và sau đó chúng ta ghi đè biến chịu trách nhiệm cho màu nền trong gốc bóng của phần tử tùy chỉnh, từ phạm vi toàn cục .

Trong một ứng dụng Angular, đây có thể là một cái gì đó như:

Parent.component.scss

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

phần tử con.component.scss

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

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

Câu trả lời nhanh là bạn không nên làm điều này. Nó phá vỡ đóng gói thành phần và làm suy yếu lợi ích bạn nhận được từ các thành phần độc lập. Xem xét việc chuyển một cờ chống đỡ cho thành phần con, sau đó nó có thể tự quyết định cách hiển thị khác nhau hoặc áp dụng CSS khác nhau, nếu cần thiết.

<parent>
  <child [foo]="bar"></child>
</parent>

Angular đang phản đối tất cả các cách ảnh hưởng đến phong cách trẻ em từ cha mẹ.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

tôi cũng gặp vấn đề này và không muốn sử dụng giải pháp không dùng nữa nên cuối cùng tôi đã bị:

trong parrent

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

thành phần con

@Input() ContainerCustomStyle: string;

ở trẻ em trong html div

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

và trong mã

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

hoạt động như mong đợi và không nên phản đối;)

Khi các bản cập nhật internet tôi bắt gặp một giải pháp.

Đầu tiên hãy cẩn thận.

1. Vẫn không làm điều đó. Để làm rõ, tôi sẽ không lên kế hoạch cho các thành phần con cho phép bạn tạo kiểu cho chúng. XÃ HỘI. Nếu bạn là người thiết kế thành phần muốn cho phép điều này thì tất cả sẽ tiếp thêm sức mạnh cho bạn.
2. Nếu con bạn không sống trong bóng tối thì điều này sẽ không phù hợp với bạn.
3. Nếu bạn phải hỗ trợ một trình duyệt không thể có bóng tối thì nó cũng không hoạt động với bạn.

Đầu tiên, đánh dấu đóng gói thành phần con của bạn là bóng để nó hiển thị trong bóng tối thực tế. Thứ hai, thêm thuộc tính một phần cho thành phần bạn muốn cho phép cha mẹ tạo kiểu. Trong biểu định kiểu thành phần của cha mẹ bạn, bạn có thể sử dụng phương thức :: part () để truy cập

Tôi đề xuất một ví dụ để làm cho nó rõ ràng hơn, vì angular.io/guide/component-ststyle nêu rõ:

Bộ kết hợp hậu duệ xuyên bóng bị phản đối và hỗ trợ đang bị xóa khỏi các trình duyệt và công cụ chính. Vì vậy, chúng tôi có kế hoạch bỏ hỗ trợ trong Angular (cho cả 3 of / deep /, >>> và :: ng-deep). Cho đến lúc đó :: ng-deep nên được ưu tiên để tương thích rộng hơn với các công cụ.

Bật app.component.scss, nhập của bạn *.scssnếu cần. _colors.scsscó một số giá trị màu phổ biến:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

Áp dụng quy tắc cho tất cả các thành phần

Tất cả các nút có btn-redlớp sẽ được tạo kiểu.

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Áp dụng quy tắc cho một thành phần

Tất cả các nút có btn-redlớp trên app-loginthành phần sẽ được tạo kiểu.

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Tôi đã giải quyết nó bên ngoài Angular. Tôi đã xác định một scss được chia sẻ mà tôi đang nhập cho con của mình.

đã chia sẻ

%cell {
  color: #333333;
  background: #eee;
  font-size: 13px;
  font-weight: 600;
}

trẻ em

@import 'styles.scss';
.cell {
  @extend %cell;
}

Cách tiếp cận được đề xuất của tôi là cách giải quyết vấn đề mà OP đã hỏi. Như đã đề cập nhiều lần, :: ng-deep ,: ng-host sẽ bị khấu hao và việc vô hiệu hóa đóng gói chỉ là quá nhiều rò rỉ mã, theo quan điểm của tôi.