내 매트 선택 패널 스타일이 Angular 머티리얼에서 작동하지 않는 이유는 무엇입니까?

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

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

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

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

1. ::ng-deep 사용

:ng-deep 섀도우 관통 하위 조합자를 사용하여 하위 구성 요소를 통해 스타일을 적용합니다.

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

2. ViewEncapsulation 사용

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

<code class="typescript">@Component({
  ...
  encapsulation: ViewEncapsulation.None
})</code>

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

style.css 파일을 사용하여 사용자 정의 스타일을 정의하고, 기존 스타일을 재정의하려면 !important로 적용하세요.

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

4. 인라인 스타일 사용

인라인 스타일을 매트 옵션 요소에 직접 적용하여 상속된 스타일을 재정의합니다.

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

위 내용은 내 매트 선택 패널 스타일이 Angular 머티리얼에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!