::ng-deep을 사용하여 Angular에서 상위 구성요소의 하위 구성요소 스타일을 어떻게 지정할 수 있나요?

상위 구성 요소의 하위 구성 요소 스타일링: Angular에서 ::ng-deep 활용

소개
Angular 4부터 개발자는 상위 구성 요소에서 하위 구성 요소의 CSS 속성을 변경해야 하는 상황에 직면할 수 있습니다. 이를 위해서는 Shadow DOM 경계를 통과하여 원하는 스타일을 대상으로 하는 방법이 필요합니다. ::ng-deep 선택기는 이 과제에 대한 솔루션을 제공합니다.

:ng-deep
사용법::ng-deep은 액세스를 허용하는 그림자 관통 선택기입니다. 상위 구성 요소의 하위 구성 요소 스타일에 적용됩니다. 이는 더 이상 사용되지 않는 /deep/ 결합자에 대한 현재 권장되는 대안이며 >>>와 동일한 별칭을 공유합니다. ::ng-deep을 활용하면 상위 구성 요소에 적용된 스타일이 하위 구성 요소에 적용되어 하위 구성 요소에 영향을 줄 수 있습니다.

예
:ng-deep의 사용법을 설명하려면, 다음 코드를 고려하세요.

<code class="html"><div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent('DETAILS')"></div></code>

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

이 예에서 ::ng-deep을 사용하여 .overview 클래스에 적용된 스타일은 .overview의 하위 구성 요소 내 p 요소에 적용됩니다. 수업. &:last-child 의사 클래스는 해당 하위 구성 요소의 마지막 p 요소에 영향을 주어 기본 하단 여백을 제거합니다.

IE11 지원
다음 사항에 유의하는 것이 중요합니다. ng-deep은 IE11에서 지원되지 않습니다. ::ng-deep을 지원하지 않는 브라우저의 경우 Angular CLI 프로젝트의 ViewEncapsulation.None 및 encapsulation: "none"과 같은 대체 방법을 탐색하여 유사한 기능을 얻을 수 있습니다.

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