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

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

Angular에서 상위 구성 요소의 CSS 파일에서 하위 구성 요소의 스타일을 지정하려면 구성 요소 범위 지정을 관통하는 방법이 필요합니다. 이 제한을 극복하는 방법은 다음과 같습니다.

업데이트(Angular 4.3.0 이상)

피어싱 CSS 조합자가 지원 중단됨에 따라 새로운 조합인 ::ng-deep이 도입되었습니다. DOM 구조 내 깊은 하위 구성 요소를 대상으로 지정할 수 있습니다.

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

기존 방식(4.3.0 이전의 Angular 버전)

:ng-deep 이전에는 피어싱을 사용할 수 있었습니다. >>>, /deep/ 및 ::shadow와 같은 CSS 결합자는 구성 요소 경계를 관통합니다. 그러나 이러한 조합자는 더 이상 사용되지 않으며 가능하면 피해야 합니다.

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

대체 접근 방식

• 캡슐화 모드: 기본적으로 구성 요소는 캡슐화됩니다. Shadow DOM을 사용하여 스타일이 구성 요소 외부로 유출되는 것을 방지합니다. 구성 요소 데코레이터(@Component)에서 캡슐화 속성을 없음으로 설정하여 캡슐화를 비활성화할 수 있습니다.
• styleUrls: 상위 구성 요소에서 스타일을 가져오려면 하위 구성 요소의 styleUrls 속성을 사용합니다. 이를 통해 하위 구성 요소 범위 내에서 상위 구성 요소의 스타일시트에 액세스할 수 있습니다. 그러나 이 접근 방식을 사용하려면 상위 스타일시트의 하위 구성요소에 대한 스타일을 수동으로 정의해야 합니다.

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