CODEWITHSUNDEEP
htmlcssangularangular-material2
nimgwfc
nimgwfc

Reputation: 1509

How to style Angular Material select drop down overlay

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.

Upvotes: 4

Views: 6160

Answers (2)

Pedro Bezanilla
Pedro Bezanilla

Reputation: 1365

try using ng-deep

::ng-deep .your-class-name {
  ...
}

PS: ng-deep will get deprecated in further versions. W3C didn't defined a 'replacement' for it yet.

Answer Update (07-07-2021): If you don't want to use ng-deep (deprecated), then use ViewEncapsulation.None: angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Upvotes: 2

frido
frido

Reputation: 14099

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;
}

https://stackblitz.com/edit/angular-k4pxc1

Upvotes: 5

Related Questions