부모 구성 요소가 있습니다.

<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에 포함시키는 데 사용하려고했습니다 .parentchild

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

그러나 그것은 도움이되지 않았으며 child스타일 시트를 가져 와서 다른 방법으로 시도했지만 parent도움이되지 못했습니다.

부모 구성 요소에 포함 된 하위 구성 요소를 어떻게 스타일링합니까?

업데이트-최신 방법

피할 수 있다면하지 마십시오. 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>      
`

업데이트 3 :

::ng-deep더 이상 사용하지 않아야 함을 의미합니다. 부모 구성 요소에서 자식 구성 요소의 스타일을 재정의해야하는 항목에 어떤 영향을 미치는지 확실하지 않습니다. 라이브러리 구성 요소에서 스타일을 재정의 해야하는 라이브러리에 영향을 미치기 때문에 이것이 완전히 제거되면 이상하게 보입니다.

이것에 대한 통찰력이 있으면 의견을 말하십시오.

업데이트 2 :

이후 /deep/모든 다른 섀도우 피어싱 선택기는 더 이상 사용되지 않습니다. ::ng-deep더 넓은 호환성을 위해 대신 사용해야하는 앵귤러 드롭 .

최신 정보:

Angular-CLI를 사용 /deep/하는 경우 대신 사용해야 >>>합니다. 그렇지 않으면 작동하지 않습니다.

실물:

Angular2의 Github 페이지로 이동하여 "style"에 대한 임의 검색을 수행 한 후 Angular 2-innerHTML styling

어떤이 추가 된 것을 사용하는 것이 말했다 2.0.0-beta.10의 >>>및 ::shadow선택기.

(>>>) (및 동등한 / deep /) 및 :: shadow가 2.0.0-beta.10에 추가되었습니다. 이들은 그림자 DOM CSS 결합기 (더 이상 사용되지 않음)와 유사하며 Angular2의 기본값 인 캡슐화 ViewEncapsulation.Emulated에서만 작동합니다. ViewEncapsulation에서도 작동하지만 필요하지 않기 때문에 무시됩니다. 이 컴비 네이터는 교차 컴포넌트 스타일링을위한 고급 기능이 지원 될 때까지 중간 솔루션입니다.

간단히 말해서 :

:host >>> .child {}

에서 parent의 스타일 시트 파일 문제를 해결했다. 위 인용문에 명시된 바와 같이이 솔루션은 고급 교차 컴포넌트 스타일링이 지원 될 때까지 중간 수준입니다.

사용하지 않아야합니다 ::ng-deep. 사용되지 않습니다. Angular에서 부모의 자식 구성 요소 스타일을 변경하는 올바른 방법은 사용하는 것입니다 encapsulation(아래의 경고를 읽고 의미를 이해하십시오).

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

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

그런 다음 :: ng-deep 없이도 구성 요소에서 CSS를 수정할 수 있습니다.

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

경고 : 이렇게하면이 구성 요소에 대해 작성한 모든 CSS 규칙이 전체적으로 적용됩니다.

CSS의 범위를이 컴포넌트로만 제한하려면 CSS 클래스를 컴포넌트의 상단 태그에 추가하고 CSS를이 태그의 "내부"에 넣으십시오.

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

Scss 파일 :

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

슬프게도 / deep / 선택기가 더 이상 사용되지 않는 것으로 보입니다 (적어도 Chrome에서는) https://www.chromestatus.com/features/6750456638341120

요컨대, 자식 컴포넌트가 동적으로 스타일을 지정하는 것 외에는 (현재) 장기적인 해결책이없는 것으로 보입니다.

자녀에게 스타일 개체를 전달하고 다음을 통해 적용
<div [attr.style]="styleobject">

할 수 있습니다 . 또는 특정 스타일이있는 경우 다음과 같은 것을 사용할 수 있습니다.
<div [style.background-color]="colorvar">

이것과 관련된 추가 토론 : https://github.com/angular/angular/issues/6511

같은 문제가 있었으므로 scss / sass와 함께 angular2-cli를 사용하는 경우 '>>>'대신 '/ deep /'을 사용하면 마지막 선택기가 아직 지원되지 않지만 (CSS에서는 훌륭하게 작동합니다).

실제 하위 구성 요소를보다 잘 타겟팅하려면 다음을 수행해야합니다. 이렇게하면 다른 자식 구성 요소가 동일한 클래스 이름을 공유해도 영향을받지 않습니다.

플 런커 : 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 {}

도움이 되었기를 바랍니다!

코드 매트릭스

실제로 한 가지 더 옵션이 있습니다. 어느 것이 안전합니다. ViewEncapsulation을 사용할 수 있습니다.하지만 모든 구성 요소 스타일을 태그 (일명 선택기)에 넣습니다. 그러나 어쨌든 항상 글로벌 스타일과 캡슐화 스타일을 선호합니다.

다음은 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() { }
}

Angular에서는이를 수행 할 수있는 몇 가지 옵션이 있습니다.

1) 깊은 CSS 선택기를 사용할 수 있습니다

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

2) 뷰 캡슐화를 기본값으로 에뮬레이트로 설정했지만 Shadow DOM 기본 브라우저 구현을 사용하는 네이티브로 쉽게 변경할 수 있습니다.이 경우 비활성화해야합니다.

예를 들면 :

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

   }
 }

Angular 구성 요소는 외부 세계에서 사용할 수있는 항목을 명시 적으로 선언해야하는 독립형 엔터티이므로 부모 구성 요소의 자식 구성 요소에 대한 CSS 규칙을 작성해서는 안됩니다. 나중에 자식 레이아웃이 변경되면 다른 구성 요소의 SCSS 파일에 흩어져있는 해당 자식 구성 요소의 스타일이 쉽게 깨져서 스타일이 매우 약해질 수 있습니다. 이것이 ViewEncapsulationCSS의 경우입니다. 그렇지 않으면 객체 지향 프로그래밍의 다른 클래스에서 일부 클래스의 개인 필드에 값을 할당 할 수 있다면 동일합니다.

따라서해야 할 일은 자식 호스트 요소에 적용 할 수있는 클래스 집합을 정의하고 자식이 이에 응답하는 방식을 구현하는 것입니다.

기술적으로 다음과 같이 수행 할 수 있습니다.

// 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>호스트 요소 에 적용하여 이러한 스타일을 외부에서 트리거 할 수 있습니다 .

자식 구성 요소 코드에 액세스 할 수 있으면 @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>

오늘 (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 앱의 경우 다음과 같습니다.

parent.component.scss

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

child-element.component.scss

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

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

빠른 대답은 당신이 전혀하지 말아야한다는 것입니다. 구성 요소 캡슐화를 중단하고 자체 포함 된 구성 요소의 이점을 손상시킵니다. prop 플래그를 자식 구성 요소에 전달하면 다른 렌더링 방법을 결정하거나 필요한 경우 다른 CSS를 적용 할 수 있습니다.

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

Angular는 부모의 자식 스타일에 영향을 미치는 모든 방법을 사용하지 않습니다.

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

나는 또한이 문제가 있었고 더 이상 사용되지 않는 솔루션을 사용하고 싶지 않아서 다음과 같이 끝났습니다.

실지로

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

자식 구성 요소

@Input() ContainerCustomStyle: string;

html div의 자식

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

그리고 코드에서

constructor(private sanitizer: DomSanitizer) {  }

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

예상대로 작동하며 더 이상 사용되지 않아야합니다.)

인터넷 업데이트로 나는 해결책을 찾았습니다.

먼저 몇 가지주의 사항이 있습니다.

1. 아직 안 해 명확히하기 위해 하위 구성 요소를 사용하여 스타일을 지정할 수는 없습니다. SOC. 구성 요소 디자이너로서 이것을 허용하고 싶다면 더 많은 힘을 얻으십시오.
2. 자녀가 그림자 돔에 살지 않으면 이것이 효과가 없습니다.
3. 그림자 돔을 가질 수없는 브라우저를 지원해야하는 경우에도 작동하지 않습니다.

먼저 자식 구성 요소의 캡슐화를 그림자로 표시하여 실제 그림자 돔에서 렌더링합니다. 둘째, 부모가 스타일을 지정할 요소에 part 속성을 추가하십시오. 부모의 컴포넌트 스타일 시트에서 :: part () 메소드를 사용하여 액세스 할 수 있습니다.

angular.io/guide/component-styles 상태 때문에 더 명확하게 만드는 예제를 제안합니다 .

섀도 피어싱 하위 항목 콤비 네이터는 더 이상 사용되지 않으며 주요 브라우저 및 도구에서 지원이 제거됩니다. 따라서 Angular (/ deep /, >>> 및 :: ng-deep 3 개 모두)에 대한 지원을 중단 할 계획입니다. 그때까지는 도구와의 광범위한 호환성을 위해 :: ng-deep이 선호되어야합니다.

에서 필요한 경우 app.component.scss가져옵니다 *.scss. _colors.scss몇 가지 일반적인 색상 값이 있습니다.

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

모든 구성 요소에 규칙 적용

btn-red수업이있는 모든 버튼의 스타일이 지정됩니다.

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

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

단일 구성 요소에 규칙 적용

컴포넌트에 btn-red클래스 app-login가있는 모든 버튼의 스타일이 지정됩니다.

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

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

Angular 외부에서 해결했습니다. 자녀에게 가져 오는 공유 scs를 정의했습니다.

shared.scss

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

child.scss

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

제안 된 접근 방식은 OP가 요청한 문제를 해결하는 방법입니다. 여러 번 언급 한 것처럼 :: ng-deep, : ng-host는 감가 상각되며 캡슐화를 비활성화하면 코드 유출이 너무 많이 발생합니다.