[FIXED] How can I apply custom styles to the mat-menu content?

Issue

I use the mat-menu for filtering the columns in the custom table component. In the mat-menu I have a search input which I want to style. I have tried:

class
panelClass
backdropClass

but with no success. I want to point out that if I put the styles in the main style.scss file the css is applied to the input field. But I want to solve it in another way, putting the css in the components file. Here is my code:

<mat-menu #menu>
    <div fxLayout="row wrap" fxFlex="100">
      <div stop-propagation fxFlex="90" fxFlexOffset="5">
        <div class="input-container">
          <input id="inputSearch" class="search-input" type="text" autocomplete="off"
            placeholder="{{ 'Ricerca...' | translate }}" [(ngModel)]="searchValue" (keyup)="filterValue(col.key)">
        </div>
        <mat-selection-list class="selectList" #select [id]="col.key"
          (selectionChange)="selecteChange($event, col.key)" class="maxHeight300">
          <ng-container *ngIf="conditionsList && conditionsList.length > 0; else noOptions">
            <mat-list-option color="primary" [checkboxPosition]="'before'" *ngFor="let condition of conditionsList"
              [value]="condition">
              {{ condition }}
            </mat-list-option>
          </ng-container>
          <ng-template #noOptions>
            <span fxLayoutAlign="center center" [innerHTML]="'Nessun risultato' | translate"></span>
          </ng-template>
        </mat-selection-list>
      </div>
      <div fxFlex="90" fxFlexOffset="5" fxLayout="row" fxLayoutAlign="space-between center"
        *ngIf="conditionsList && conditionsList.length > 0" class="marginBottom10">
        <button fxFlex="49" mat-raised-button (click)="clearColumn(col.key)">Pulisci</button>
        <button fxFlex="49" mat-raised-button color="primary" (click)="applyFilter(col.key)">Filtra</button>
      </div>
    </div>
  </mat-menu>

and the css

.search-input {
    width: 100%;
    -webkit-transition: -webkit-box-shadow 0.3s;
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    font-size: 16px;
    line-height: 22px;
    padding: 10px;
    background-color: white;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    border: 1px solid grey;
    box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 10%), 0px 2px 5px 0px rgb(0 0 0 / 8%);      
}

Solution

As per comments from question:

Due to how MatMenu (and CdkOverlay in general, which is used underneath) is instantiated, styles have to be scoped globally for them to affect things rendered in the overlay. They can be placed in different file, but they have to pierce the component level in some way.

This means that one can style it with one of the below:

• Use ::ng-deep (which is deprecated, but still working) selector to pierce the component
• Use ViewEncapsulation.None to promote the component stylesheet to the global level
• Place styles in the global styles.scss

An example using ::ng-deep with styles from the question are provided in the stacblitz here.

Answered By - TotallyNewb

Answer Checked By - Pedro (PHPFixing Volunteer)