Angular에서 부모의 자식 구성 요소 스타일 지정

Angular는 개발자가 고유한 논리와 스타일을 사용하여 별도의 구성 요소를 만들도록 권장하는 모듈식 디자인을 제공합니다. 이 접근 방식에는 많은 장점이 있지만 몇 가지 문제를 해결할 수 있습니다. 이 게시물에서는 Angular에서 스타일 상속 문제를 해결하는 방법을 보여주고자 합니다.

문제

몇 가지 구성 요소를 만들고 스타일을 적용해 보겠습니다.

부모.템플릿.html

<div class="parent__container">
  <app-child></app-child>
</div>

부모.구성요소.css

.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

child.template.html

<div class="child__container"></div>

child.component.css

.child__container {
  background-color: green;
  width: 150px;
  height: 150px;
}

이것이 어떻게 보이는지입니다. A 매우 간단한 마크업과 그 결과.



이제 부모의 동작을 기반으로 자식 구성 요소의 스타일을 지정하려는 상황을 상상해 보십시오. 새 css 클래스가 상위 구성 요소에 추가되고 이 클래스를 기반으로 내부에 있는 컨테이너의 스타일을 변경하려고 합니다.

부모.구성요소.css

.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

.parent__container.alert .child__container {
  background-color: darkred;
}

내부div는 이제 background-color 속성을 darkred로 변경해야 합니다. 그러나 그렇지 않습니다. 개발자 도구로 요소를 검사하면 child__container 클래스에 대한 스타일이 적용되지 않음을 알 수 있습니다.

해결책

이것은 속성의 encapsulation가 들어오는 때입니다. 기본적으로 모든 Angular 구성 요소 스타일은 캡슐화됩니다. 즉, 구성 요소 자체에만 적용됩니다. 구성 요소 외부에 있는 CSS 클래스의 스타일을 지정하려고 하면 적용되지 않습니다.

이 문제에 대한 가장 간단한 해결책은 구성 요소에서 encapsulation 속성을 ViewEncapsulation.None로 설정하는 것입니다.

parent.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ParentComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

이제 스타일은 더 이상 캡슐화되지 않으며 조작 결과는 정확히 우리가 원하는 것입니다.



그러나 이 솔루션에는 심각한 단점이 있습니다. parent 구성 요소의 스타일은 구성 요소 경계를 넘어 이제 전역적입니다. 동일한 클래스의 요소가 더 있으면 이러한 요소에 스타일이 적용됩니다. 이로 인해 예기치 않은 동작이 발생할 수 있으므로 이 솔루션을 신중하게 사용해야 합니다.

::ng-deep 사용

운 좋게도 이 문제에 대한 더 나은 해결책이 있습니다. Angular는 ::ng-deep 의사 클래스를 제공합니다. 이를 사용하면 해당 특정 규칙에 대한 캡슐화가 비활성화됩니다. 이 의사 클래스와 함께 선택기를 사용하면 전역 스타일이 됩니다. 그러나 이전 솔루션과 비교하여 선택자와 그 하위 항목만 전역 범위에 적용됩니다.
예제에서 사용하는 방법은 다음과 같습니다.

부모.구성요소.css

::ng-deep .parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

.parent__container.alert .child__container {
  background-color: darkred;
}

그게 다야. ::ng-deep 선택기는 parent__container 요소 내의 모든 요소를 ​​대상으로 합니다. 프로젝트에서 BEM css 클래스 명명 규칙과 함께 사용하면 구성 요소 외부에서 스타일이 "누수"되는 것을 방지하기에 충분합니다.

우리의 경우 마지막 해결책은 스타일을 Angular 프로젝트의 styles.css 디렉토리에 있는 src 파일에 넣는 것입니다.

결론

Angular 구성 요소 외부에 CSS 스타일을 전파하는 것이 가능합니다. 그러나 예기치 않은 스타일 문제가 발생할 수 있으므로 이 접근 방식의 사용을 줄이십시오. 하위 요소에 스타일을 적용해야 하는 경우 ::ng-deep 의사 클래스를 사용하십시오.