Стайлинг-мат-выбор в угловом материале

Как создать элемент панели выбора мата. Из документов я понимаю, что мне нужно предоставить panelClass, поэтому я делаю это следующим образом:

<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, не работает. Кто-нибудь знает, почему это так странно?

Я использую: Angular 4.4.5 @angular/material: 2.0.0-beta.12

Ответ 1

Угловой материал использует mat-select-content как имя класса для содержимого списка выбора. Для его стиля я бы предложил четыре варианта.

1. Используйте :: ng-deep :

Используйте комбинатор /deep/shadow-piercing descendant combinator, чтобы стилизовать стиль через дочернее дерево компонентов во всех дочерних компонентах. /Deep/combinator работает с любой глубиной вложенных компонентов, и применяется как к дочерним элементам представления, так и к дочерним элементам контента компонента. Используйте /deep/, >>> и :: ng-deep только с эмулированным инкапсуляцией представления. Эмуляция - это стандартная и наиболее часто используемая инкапсуляция. Для получения дополнительной информации см. Раздел инкапсуляции представления управления. Тени-пронизывающий комбинатор-потомок устарел, и поддержка удаляется из основных браузеров и инструментов. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of/deep/, >>> и :: ng-deep). До тех пор :: ng-deep следует предпочесть для более широкой совместимости с инструментами.

CSS:

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

DEMO

2. Используйте ViewEncapsulation

... стили CSS компонента инкапсулируются в представление компонентов и не влияют на остальную часть приложения. Чтобы контролировать, как это инкапсуляция происходит на основе каждого компонента, вы можете установить режим инкапсуляции вида в метаданных компонента. Выберите один из следующих режимов:.... None означает, что Angular не делает инкапсуляцию зрения. Угловая добавляет CSS к глобальным стилям. Правила обзора, выделения и защиты, обсуждавшиеся ранее, не применяются. Это по существу то же самое, что вставка стилей компонентов в HTML.

Ничего не значит, что вам нужно будет разбить инкапсуляцию и задать стиль материала из вашего компонента. Таким образом, можно установить селектор компонентов:

Typscript:

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

CSS

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

DEMO

3. Установите стиль класса в style.css

На этот раз вам придется "форсировать" стили с !important тоже.

style.css

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

DEMO

4. Используйте встроенный стиль

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

DEMO

Ответ 2

Поместите свое имя класса в элемент поля mat-form-field. Это работает для всех входов.

Ответ 3

Вы также можете взглянуть на ответ Гибкого решения, представленный в этом решении.

Убедитесь, что файл css со стилем, специфичным для вашей панели, импортирован в ваш файл styles.css (при условии, что это глобальный файл css в вашем проекте, вы можете проверить это в файле angular.json в разделе 'styles'). Только тогда ваш html распознает, чтобы настроить стиль для этой конкретной панели.