I have an angular component called currency-selector which has its own css file that looks like this:
.currency-select {
position: absolute;
top: 5px;
right: 80px;
z-index: 1000000;
color: #DD642A;
font-size: 17px;
padding-right: 16px;
width: 130px;
}
.mat-form-field {
display: block;
}
This works exactly as expected for the selector until it is clicked and the drop down happens. The html is as follows:
<div class="currency-select">
<mat-form-field *ngIf=loaded>
<mat-select [formControl]="currencyForm" placeholder="Select Currency">
<select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()" >
</select-search>
<mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()">
<flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"></flag-icon> {{currency.counter_currency_code}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
When I click on the currency select, the drop down doesn't appear how I want it to appear and I can't seem to add anything in the currency-select.component.html file to alter it, instead it seems to take the styling from a different div tag, "cdk-overlay-container".
Can anyone advise as to how I can write the css for this in the currency-select css file? I've tried using !important but this isn't working eithher.
To style the drop down overlay add a class to it using the mat-select input panelClass.
<mat-select panelClass="myPanel">
Then use ::ng-deep:
::ng-deep .myPanel.mat-select-panel {
background-color: darkslategray;
}
Or disable ViewEncapsulation for the component:
@Component({
selector: 'select-panel-class-example',
templateUrl: 'select-panel-class-example.html',
styleUrls: ['select-panel-class-example.css'],
encapsulation: ViewEncapsulation.None,
})
.myPanel.mat-select-panel {
background-color: darkslategray;
}