Angular Material에서 mat-select 스타일 지정

mat-select의 모양을 사용자 정의할 때 패널 구성 요소의 스타일을 지정하는 데 어려움을 겪을 수 있습니다. panelClass 속성을 사용하여 사용자 정의 스타일을 지정하는 권장 접근 방식을 따랐음에도 불구하고 스타일이 적용되지 않아 당황스럽습니다.

스타일이 작동하지 않는 이유

Angular Material은 mat-select를 사용합니다. -content를 선택 목록 콘텐츠의 클래스 이름으로 사용합니다. 이 구성 요소의 스타일을 지정하려면 다음과 같은 여러 가지 방법을 사용할 수 있습니다.

1. ::ng-deep

사용::ng-deep 그림자 관통 하위 결합자를 사용하여 하위 구성 요소를 통해 스타일을 강제 적용합니다.

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2. ViewEncapsulation 사용

구성 요소의 뷰 캡슐화를 없음으로 구성하여 스타일이 구성 요소의 격리를 벗어날 수 있도록 합니다.

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. style.css에서 클래스 스타일 설정

style.css 파일을 사용하여 사용자 정의 스타일을 정의하고 !important로 적용하여 기존 스타일을 재정의합니다.

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4. 인라인 스타일 사용

인라인 스타일을 mat-option 요소에 직접 적용하고 상속된 스타일을 재정의합니다.