Блог

Главная - Вопросы по программированию - Как я могу оформить Angular 10 Material Select (и другие) по-своему

Как я могу оформить Angular 10 Material Select (и другие) по-своему

#angular #angular-material

#angular #angular-материал

Вопрос:

Я пытаюсь придать своему выпадающему меню angular material собственный стиль. Я использую Angular 10. Я провел много исследований и перепробовал много вещей, которые я мог найти в Stackoverflow и других, но когда я копирую подходы из Интернета, стиль моего mat-select не меняется. Вот мой текущий код:

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


interface Radius {
  value: number;
  viewValue: string;
}

@Component({
  selector: 'app-landing-page',
  animations: [],
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss'],

  encapsulation: ViewEncapsulation.None
})
export class LandingPageComponent implements OnInit { // The dropdown menu containing component
  // .....

  radiusList: Radius[] = [
    {value: -1, viewValue: "Nothing"},
    {value: 5, viewValue: "5km"},
    {value: 10, viewValue: "10km"},
    {value: 15, viewValue: "15km"},
    {value: 25, viewValue: "25km"},
    {value: 50, viewValue: "50km"},
    {value: 100, viewValue: "100km"},
  ]
  selectedRadius: Radius;
  
  
  // .....
}

// ---------------------------------
// app.module.ts

import {MatSelectModule} from '@angular/material/select'; 
// ...

@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,

    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }  
 .test.mat-select-panel {
    background: red; // also background-color does not work
}  
 <mat-form-field appearance="fill">
    <mat-label>Umkreis</mat-label>
    <mat-select panelClass="test" [(ngModel)]="selectedRadius" name="radius">
        <mat-option *ngFor="let radius of radiusList" [value]="radius.value">
            {{radius.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Может кто-нибудь дать мне подсказку, как я могу оформить выпадающее меню? Будет ли это везде одинаково, если я буду использовать другие компоненты из Angular Material?

Заранее благодарю вас!

Ответ №1:

Вы должны использовать ::ng-deep селектор в своем CSS.

Например:

 ::ng-deep .mat-select-panel {
    background: red; // also background-color does not work
}

Но будьте осторожны, ::ng-deep примените стиль через дерево дочерних компонентов ко всем представлениям дочерних компонентов, и, согласно официальной документации, этот способ устарел.

Вы можете найти более подробную информацию здесь

Ответ №2:

Просто поместите свои стили в styles.scss файл на уровне приложения

Комментарии:

1. Спасибо, это работает, но я не понимаю, почему. У вас есть объяснение этому?

2. Я думаю, что эти стили применяются глобально после того, как все компоненты были скомпилированы, поэтому они перезаписывают стили материалов