title: How to style Angular Material select drop down overlay
body: <p>I have an angular component called currency-selector which has its own css file that looks like this:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>This works exactly as expected for the selector until it is clicked and the drop down happens. The html is as follows:</p>
  
  <pre><code>&lt;div class="currency-select"&gt;
    &lt;mat-form-field *ngIf=loaded&gt;
      &lt;mat-select [formControl]="currencyForm" placeholder="Select Currency"&gt;
        &lt;select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()" &gt;
        &lt;/select-search&gt;
        &lt;mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()"&gt;
            &lt;flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"&gt;&lt;/flag-icon&gt;  {{currency.counter_currency_code}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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".</p>
  
  <p>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.</p>