::ng-deep을 사용하여 Angular에서 부모로부터 중첩된 구성 요소의 스타일을 어떻게 지정할 수 있나요?

Angular에서 ::ng-deep을 사용하여 Shadow-Piercing 스타일링 단순화

상위 요소로부터 중첩된 구성 요소의 스타일을 지정하는 것은 일반적인 과제입니다. 각도에서. 한때는 더 이상 사용되지 않는 /deep/ 조합자가 해결책이었지만 이제는 ::ng-deep 선택기를 사용하는 것이 좋습니다.

:ng-deep의 목적

::ng-deep을 사용하면 구성 요소 캡슐화를 뚫고 상위 구성 요소의 하위 구성 요소에 스타일을 적용할 수 있습니다. 이 기능은 하위 항목의 기존 스타일을 재정의하거나 보완해야 할 때 특히 유용합니다.

구문 및 예

:ng-deep의 구문은 다음과 같습니다.

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

예를 들어 div 요소가 있는 상위 구성 요소가 있고 해당 하위 구성 요소 내에서 단락 요소의 스타일을 지정하려는 경우 다음 코드를 사용할 수 있습니다.

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

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

이 CSS는 하위 구성 요소에 있는 단락 요소의 기본 색상을 재정의합니다.

IE11 호환성

:ng-deep에 유의하는 것이 중요합니다. Internet Explorer 11에서는 지원되지 않습니다. 따라서 IE11을 대상으로 하는 경우 하위 구성 요소를 div로 래핑하고 대신 div의 스타일을 지정하는 등 섀도우 피어싱 스타일에 대한 대체 접근 방식을 모색해야 할 수도 있습니다.

위 내용은 ::ng-deep을 사용하여 Angular에서 부모로부터 중첩된 구성 요소의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!