상위 구성 요소의 CSS에서 각도 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

상위 구성 요소의 CSS 파일에서 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

문제:

Angular 애플리케이션에서 상위 구성 요소에는 여러 하위 구성 요소가 포함되어 있습니다. 목표는 상위 구성 요소의 CSS 파일을 사용하여 하위 구성 요소의 스타일을 지정하는 것입니다. 그러나 구성 요소 격리로 인해 상위 구성 요소에 정의된 스타일이 하위 구성 요소에 적용되지 않습니다.

해결책:

업데이트: 더 이상 사용되지 않는 기능

피어싱 CSS 결합자는 Angular 4.3.0에서 더 이상 사용되지 않습니다. 그리고 나중에. 가능하면 이 방법을 사용하지 마세요.

최신 접근 방식: ::ng-deep 연산자

상위 구성 요소 CSS 파일에서 하위 구성 요소의 스타일을 지정하려면 ::ng를 사용하세요. -딥 오퍼레이터. 이 연산자를 사용하면 스타일이 캡슐화 경계를 뚫고 하위 구성 요소에 영향을 미칠 수 있습니다.

:host {
  color: red;
}

:host ::ng-deep parent {
  color: blue;
}

기존 접근 방식: CSS 결합자 피어싱

:ng- 도입 전 >>>, /deep/ 및 ::shadow와 같은 깊고 날카로운 CSS 결합자를 사용할 수 있습니다. 그러나 이 기능은 이제 더 이상 사용되지 않으므로 사용하지 않아야 합니다.

예:

:host {
  color: red;
}

:host >>> parent {
  color: blue;
}

위 내용은 상위 구성 요소의 CSS에서 각도 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!