Angular Material 매트 선택 패널의 스타일을 지정하는 방법은 무엇입니까?

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

문제

panelClass를 사용하여 mat-select 구성 요소의 패널을 사용자 정의할 때 , HTML 템플릿에서 적절한 클래스 할당에도 불구하고 CSS 스타일이 적용되지 않습니다.

해결책

Angular 9 이상 버전:

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

Angular 2.0.0- beta.12 및 이전 버전에는 패널 스타일을 지정하는 여러 가지 옵션이 있습니다.

옵션 1: ::ng-deep 사용

이 방법은 ::ng를 활용합니다. -구성 요소의 뷰 캡슐화를 관통하는 딥 콤비네이터:

<code class="css">::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}</code>

옵션 2: ViewEncapsulation 사용

구성 요소 메타데이터에서 캡슐화 모드를 없음으로 설정하면 CSS 스타일 더 이상 구성 요소 뷰 내에 캡슐화되지 않습니다.

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>

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

스타일을 .mat-select에 직접 적용 외부 style.css 파일의 콘텐츠 클래스, !important를 사용하여 강제 적용:

<code class="css"> .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } </code>

옵션 4: 인라인 스타일 사용

인라인 스타일을 내부에서 직접 정의 HTML 템플릿:

<code class="html"><mat-option style="width:2000px; background-color: red; font-size: 10px;" ...></mat-option></code>

위 내용은 Angular Material 매트 선택 패널의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!