title: How can I apply custom styles to the mat-menu content?
body: <p>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:</p>
  <pre><code>class
  panelClass
  backdropClass
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;mat-menu #menu&gt;
      &lt;div fxLayout=&quot;row wrap&quot; fxFlex=&quot;100&quot;&gt;
        &lt;div stop-propagation fxFlex=&quot;90&quot; fxFlexOffset=&quot;5&quot;&gt;
          &lt;div class=&quot;input-container&quot;&gt;
            &lt;input id=&quot;inputSearch&quot; class=&quot;search-input&quot; type=&quot;text&quot; autocomplete=&quot;off&quot;
              placeholder=&quot;{{ 'Ricerca...' | translate }}&quot; [(ngModel)]=&quot;searchValue&quot; (keyup)=&quot;filterValue(col.key)&quot;&gt;
          &lt;/div&gt;
          &lt;mat-selection-list class=&quot;selectList&quot; #select [id]=&quot;col.key&quot;
            (selectionChange)=&quot;selecteChange($event, col.key)&quot; class=&quot;maxHeight300&quot;&gt;
            &lt;ng-container *ngIf=&quot;conditionsList &amp;&amp; conditionsList.length &gt; 0; else noOptions&quot;&gt;
              &lt;mat-list-option color=&quot;primary&quot; [checkboxPosition]=&quot;'before'&quot; *ngFor=&quot;let condition of conditionsList&quot;
                [value]=&quot;condition&quot;&gt;
                {{ condition }}
              &lt;/mat-list-option&gt;
            &lt;/ng-container&gt;
            &lt;ng-template #noOptions&gt;
              &lt;span fxLayoutAlign=&quot;center center&quot; [innerHTML]=&quot;'Nessun risultato' | translate&quot;&gt;&lt;/span&gt;
            &lt;/ng-template&gt;
          &lt;/mat-selection-list&gt;
        &lt;/div&gt;
        &lt;div fxFlex=&quot;90&quot; fxFlexOffset=&quot;5&quot; fxLayout=&quot;row&quot; fxLayoutAlign=&quot;space-between center&quot;
          *ngIf=&quot;conditionsList &amp;&amp; conditionsList.length &gt; 0&quot; class=&quot;marginBottom10&quot;&gt;
          &lt;button fxFlex=&quot;49&quot; mat-raised-button (click)=&quot;clearColumn(col.key)&quot;&gt;Pulisci&lt;/button&gt;
          &lt;button fxFlex=&quot;49&quot; mat-raised-button color=&quot;primary&quot; (click)=&quot;applyFilter(col.key)&quot;&gt;Filtra&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/mat-menu&gt;
  </code></pre>
  <p>and the css</p>
  <pre><code>.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%);      
  }
  </code></pre>