Блог

Главная - Вопросы по программированию - Angular 10 — Удалить цвет фона на mat-select

Angular 10 — Удалить цвет фона на mat-select

#css #angular #angular-material #background-color

#css #angular #angular-материал #background-color

Вопрос:

Просто взгляните на изображение:

mat-опция

В принципе, я хочу изменить / удалить цвет фона (серый) на этом элементе mat-option. Я также попытался с помощью инспектора браузера найти класс, у которого есть строка цвета фона, но я ничего не смог найти.

Есть идеи?

Ответ №1:

Вам нужно либо:

  1. устаревший ng-deep
  2. отключить инкапсуляцию представления компонента
  3. используйте глобальный стиль
 ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #fff; 
}

Ответ №2:

Вы можете попробовать:

 .mat-form-field-appearance-fill .mat-form-field-flex {
   background-color: red;
}

Это помогло мне.

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

1. Вы были правы, но без устаревшего «ng-deep» он не будет работать на одном компоненте, все равно спасибо

2. Только одно замечание ng-deep : оно помечено как устаревшее: angular.io/guide/component-styles#deprecated-deep—and-ng-deep .

Ответ №3:

Просто введите свой стиль css:

 ::ng-deep
  .mat-form-field-type-mat-select:not(.mat-form-field-disabled)
  .mat-form-field-flex {
  background-color: transparent !important;
}

вот демонстрация: https://stackblitz.com/edit/angular-pj5rjj-hnmy6q?file=app/sidenav-position-example.css