Изменить angular выбранные значения мультиселектора материала css

Question

Я хочу изменить материал для нескольких выбранных значений css.

                <mat-form-field class="mat-form-field-fluid">
                    <mat-select placeholder="Kullanıcı Yetkileri" [(value)]="selectedPermissions" multiple>
                      <mat-option *ngFor="let permission of filteredPermissions | async" [value]="permission">{{permission.name}}</mat-option>
                    </mat-select>
                  </mat-form-field>

Когда я проверяю выбранные значения в исходном коде браузера, я вижу это так:

<span class="ng-tns-c22-16 ng-star-inserted">selection-1,selection-2</span>

Поэтому я хочу установить класс css для выбранных значений, обернув span.

Как изменить css выбранных значений мультиселектора материала.

Спасибо.

Answer 1

Это зависит, но, вероятно, вам нужно будет отключить инкапсуляцию компонента, который содержит <mat-form-field>

На вашем @Component декораторе добавить:

encapsulation: ViewEncapsulation.None

Таким образом, вы можете проверить компонент с помощью инспектора браузера и написать соответствующие CSS правила.