::ng-deep을 사용하여 Angular 4에서 하위 구성 요소 CSS 속성을 어떻게 재정의할 수 있나요?

Angular 4에서 ::ng-deep으로 하위 구성 요소 CSS 속성 덮어쓰기

Angular 4에서 ::ng-deep 선택기를 사용하면 다음이 가능합니다. 상위 구성 요소의 CSS 내에서 하위 구성 요소의 CSS 속성을 재정의할 수 있습니다. 이는 하위 구성 요소의 Shadow DOM 경계를 관통하여 달성됩니다.

사용법:

:ng-deep을 사용하려면 CSS 선택기 앞에 추가하기만 하면 됩니다. 다음과 같이 하위 구성 요소의 요소를 대상으로 합니다.

<code class="css">::ng-deep .child-component {
  /* CSS properties to override */
}</code>

예:

다음 HTML 구조를 고려하세요.

<code class="html"><parent-component>
  <child-component class="child"></child-component>
</parent-component></code>

재정의하려면 하위 구성 요소 내의 p 요소 스타일을 변경하려면 상위 구성 요소에서 다음 CSS를 사용할 수 있습니다.

<code class="css">::ng-deep .child p {
  color: red;
}</code>

IE11 지원:

::ng -deep은 Internet Explorer 11에서 지원되지 않습니다. IE11을 지원해야 하는 경우 대체 :host-context() 선택기를 대신 사용해야 합니다. 그러나 :host-context()에는 고유한 제한 사항이 있으며 모든 경우에 적합하지 않을 수 있습니다.

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