::ng-deep을 사용하여 Angular 4에서 하위 구성 요소의 스타일을 어떻게 지정합니까?

:ng-deep을 사용하여 Angular 4에서 하위 구성 요소 스타일 지정

상위 구성 요소에서 하위 구성 요소로 CSS 속성을 덮어쓰는 것은 일반적인 작업일 수 있습니다. 모난. Angular 4에서는 ::ng-deep 선택기를 활용하여 이 작업을 수행할 수 있습니다.

::ng-deep(이전에는 /deep/으로 알려짐) 이후에는 >>> 는 하위 구성 요소 내에 캡슐화되어 있는 경우에도 스타일을 중첩된 요소로 계단식으로 적용할 수 있는 그림자 관통 결합기입니다. 이는 외부 구성요소나 라이브러리 내의 요소 모양을 사용자 정의할 때 특히 유용합니다.

사용법

::ng-deep을 사용하려면 CSS 선택기 앞에 붙으면 됩니다. 하위 구성 요소의 요소에 적용하려고 합니다. 예:

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}

호환성

Internet Explorer 11(IE11)에서는 ::ng-deep이 지원되지 않는다는 점에 유의하는 것이 중요합니다. 이는 IE11이 섀도우 피어싱 연결자를 지원하지 않기 때문입니다. 이러한 이유로 IE11에서는 하위 구성 요소의 스타일링을 위해 View Encapsulation 플래그를 사용하거나 원하는 스타일을 노출하는 Angular 모듈을 생성하는 등 대체 방법을 사용하는 것이 좋습니다.

예

다음 HTML을 고려하세요.

<code class="html"><div class="container">
  <app-child-component></app-child-component>
</div></code>

그리고 다음 CSS도 고려하세요.

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>

이 CSS는 하위 요소 클래스가 있는 모든 요소에 파란색을 적용합니다. 앱-하위 구성 요소.

위 내용은 ::ng-deep을 사용하여 Angular 4에서 하위 구성 요소의 스타일을 어떻게 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!