각진 소재에서 스타일링 매트 선택

각진 소재에서 스타일링 매트 선택

매트 셀렉트의 패널 구성요소 스타일 설정 방법문서에서 패널 클래스를 제공해야 하므로 다음과 같이 만듭니다.

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

개발자 도구에서 이 클래스가 DOM의 패널에 부착되어 있고 부착되어 있는지 확인했습니다.그래서 나는 이 요소에 나의 커스텀 scss 클래스를 첨부합니다.이제 제가 css를 제공하면 작동하지 않습니다.예를 들어 나의 scss는 다음과 같습니다.

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

패널의 폭은 항상 다음과 같습니다.width선택한 요소의.때때로 옵션에서 문자열이 너무 길어서 조금 더 넓게 만들고 싶습니다.이것을 할 수 있는 방법이 있습니까?의 내 은 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅠbackground-color작동하지 않습니다.이게 왜 그렇게 이상하게 행동하는지 누가 아나요?

사용 중:각도 4.4.5 @ 각도/재료: 2.0.0-베타.12

Angular9+의 경우 다음을 사용할 수 있습니다.

.mat-select-panel {
    background: red;
    ....
}

데모

---

Angular Material uses mat-select-content as class name for the select list content. For its styling I would suggest four options.

사용::ng-deep:

/deep/shadow-pearing 하위 조합을 사용하여 하위 구성요소 트리를 통해 모든 하위 구성요소 뷰에 스타일을 강제로 적용합니다./deep/combinator는 중첩된 구성요소의 깊이에 상관없이 작동하며 구성요소의 보기 하위 및 내용 하위에 모두 적용됩니다.에뮬레이트된 보기 캡슐화에서만 /deep/, >> 및 ::ng-deep를 사용합니다.Emulated는 기본적으로 가장 일반적으로 사용되는 보기 캡슐화입니다.자세한 내용은 뷰 캡슐화 제어 섹션을 참조하십시오.섀도 피어싱 하위 조합은 더 이상 사용되지 않으며 주요 브라우저 및 도구에서 지원이 제거되고 있습니다.따라서 Angular에서 지원을 중단할 계획입니다(/deep/, >> 및 ::ng-deep의 3가지 모두에 대해).그때까지는 ::ng-deep가 도구와의 광범위한 호환성을 위해 선호되어야 합니다.

CSS:

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

데모

---

뷰 캡슐화 사용

구성요소 CSS 스타일은 구성요소의 보기에 캡슐화되며 응용프로그램의 나머지 부분에는 영향을 주지 않습니다.구성 요소별로 이 캡슐화가 수행되는 방식을 제어하기 위해 구성 요소 메타데이터에서 보기 캡슐화 모드를 설정할 수 있습니다.다음 모드 중에서 선택합니다. ...없음은 Angular가 캡슐화 보기를 하지 않음을 의미합니다.Angular는 CSS를 전역 스타일에 추가합니다.앞에서 설명한 범위 지정 규칙, 분리 및 보호는 적용되지 않습니다.이것은 기본적으로 구성요소의 스타일을 HTML에 붙여넣는 것과 같습니다.

캡슐화를 해제하고 구성요소에서 재료 스타일을 설정하는 데 필요한 값은 없습니다.구성 요소의 셀렉터에 설정할 수 있습니다.

타이프스크립트:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

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

데모

---

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

이번에는 스타일을 '강제'해야 합니다.!important너무.

스타일. 스타일.

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

데모

---

인라인 스타일 사용

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

데모

매트 양식 필드 요소에 클래스 이름을 입력합니다.이것은 모든 입력에 적용됩니다.

작업 솔루션은 in-build: panelClass 특성을 사용하고 globalstyle.css(with!important)로 스타일을 설정합니다.

https://material.angular.io/components/select/api

/* style.css */
.matRole .mat-option-text {
  height: 4em !important;
}

<mat-select panelClass="matRole">...

선택 항목의 옵션이 예를 들어 매트 양식 필드와 같은 표준 방식으로 스타일을 지정할 수 없는 이유에 대한 설명을 추가하려고 합니다.

매트 선택 또는 재료 모달의 옵션과 같은 요소는 각도 응용프로그램 내부가 아니라 용기에 있습니다.cdk-overlay-container.그cdk-overlay-container각도 적용과 동일한 레벨에 있습니다.따라서 구성 요소의 일반 CSS 규칙이 요소에 적용되지 않는 이유를 설명합니다.

이것이 우리가 @Vega의 대답처럼 수업에 접근해야 하는 이유입니다.

::ng-deep {
  .mat-option {
    font-family: cursive;
  }
}

CSS에서 이 코드를 복사하여 100% 너비를 만듭니다.

mat-form-field {
  width: 100%;
}

각재 11.2.6

      <mat-select class="text-sm">
        <mat-option> Text </mat-option>
      </mat-select>

여기서 text-sm(후풍 기준)

.text-sm {font-size: 0.75rem}

여기 스타일링 매트 셀렉트를 위한 완전한 솔루션이 있습니다.

HTML은 다음과 같습니다.

<mat-form-field class="booking-facility">
  <mat-select disableOptionCentering placeholder="facility" panelClass="booking-facility-select" [ngModel]="facilityId"
                      (ngModelChange)="updateFacility($event)">
    <mat-option *ngFor="let fac of facilities | keyvalue" [value]="fac.value.id">
      <span>{{ fac.value.name | lowercase }}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

SCSS는 다음과 같습니다(글로벌 스타일시트, 즉 styles.scss 사용).

.booking-facility-styles {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 1px;
  font-size: 22px;
  color: #55595C;
}

.booking-facility {
  // label
  @extend .booking-facility-styles;

  // label
  .mat-form-field-label {
    @extend .booking-facility-styles;
    color: #BBB !important;
  }

  .mat-select-value-text {
    // select
    @extend .booking-facility-styles;
  }
}

.booking-facility-select .mat-option {
  // options
  @extend .booking-facility-styles;
  font-size: 16px !important;
}

  .mat-form-field .mat-input-element, .mat-form-field .mat-select,
  .mat-form-field.mat-form-field-appearance-legacy .mat-input-element,
  .mat-form-field.mat-form-field-appearance-legacy .mat-select {
    background-color: #0A0A0A !important;

    .mat-select-value {
      color: #fefefe !important;
      font-size: 14px !important;
      font-weight: $font-w-light;
    }
  }

구성요소에서 스타일 캡슐화를 사용하지 않도록 설정합니다.

@Component({
    selector: 'xxx',
    templateUrl: './xxx.component.html',
    styleUrls: ['./xxx.component.scss'],
    encapsulation: ViewEncapsulation.None
})

외관(색상/글꼴)의 경우,

.mat-select-panel {
   background: red;
}

텍스트가 매우 긴 옵션이 있는 경우 목록의 너비를 변경할 수 있습니다.이러한 경우 다음을 사용해야 합니다.

.mat-form-field {
    width: 100%;

    .mat-form-field-infix {
        width: 100%;
    }
}

아니요.!important;css 셰니건이 필요합니다.
(ang12+와 함께 제공)

위해서<mat-option>안에서.<mat-autocomplete>설정할 수 있습니다.panelWidth자동 완성의 속성:

<mat-autocomplete panelWidth="240px">

다음과 같은 매트 옵션에 단순 클래스를 추가하여 달성할 수 있습니다.

<mat-option class="no-hover">Text here</mat-option>

수업을 추가하는 중

.no-hover:hover {
   background-color: red!important;
}

또는 좀 더 구체적으로 말하자면.

.no-hover:hover:not(.mat-option-disabled), .no-hover:focus:not(.mat-option-disabled) {
background-color: red;
    color:#909090;
}

참고: 필요한 경우 !important를 사용하여 재정의합니다.

언급URL : https://stackoverflow.com/questions/46766597/styling-mat-select-in-angular-material