Как перебить стили селекта матриал ангуляр 18

Есть такой селект материала

<mat-form-field class="custom-select">
  <mat-label>{{selectName}}</mat-label>
  <mat-select [value]="selectedValue" (selectionChange)="onChange($event)">
    @for (option of optionsList; track option) {
    <mat-option [value]="option">{{option.innerHTML}}</mat-option>
    }
  </mat-select>
</mat-form-field>

Такая компонента

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import {MatSelectChange, MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import {OptionItemInterface} from "../../entities/models/custom-select";

@Component({
  selector: 'custom-select',
  standalone: true,
  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
  templateUrl: './custom-select.component.html',
  styleUrl: './custom-select.component.scss'
})
export class CustomSelectComponent {
  @Input() selectName: string = "";
  @Input() optionsList: OptionItemInterface[] = [];
  @Input() selectedValue: OptionItemInterface | undefined;
  @Output() onChanged = new EventEmitter<OptionItemInterface>();

  onChange(event: MatSelectChange) {
    this.onChanged.emit(event.value);

  }
}

Scss файл

.custom-select {
  border: solid var(--default-border-width) var(--bg-color);
  border-radius: var(--second-border-radius);
  background-color: var(--bg-color);

  .label {
    color: var(--main-font-color);
  }

  &:hover {
    border: solid 2px var(--accent-color);

    .label {
      color: var(--accent-color);
    }
  }
}

В браузере зеленым выделил компоненту на который навешивается background-color, и класс в котором он лежит .mdc-text-field--filled. Не понятно как их перебить, так как вроде бы с 17 версии анагуляра nd deep запрещен. Нашел, что рекомендуют вот так к калссам обращаться и перебивать стили. С обычным инпутом материала все работало, просто копировал нужные классы и перебивал стили https://material.angular.io/components/select/overview тут селект basic-select Скрин компоненты


Ответы (0 шт):