Как перебить стили селекта матриал ангуляр 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