title: Styling mat-select in Angular Material
body: <p>How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this: </p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-select placeholder="Search for"
      [(ngModel)]="searchClassVal"
      panelClass="my-select-panel-class"
      (change)="onSearchClassSelect($event)"&gt;
      &lt;mat-option *ngFor="let class of searchClasses" [value]="class.value"&gt;{{class.name}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:</p>
  
  <pre><code>.my-select-panel-class {
      width:20px;
      max-width:20px;
      background-color: red;
      font-size: 10px;
  }
  </code></pre>
  
  <p>The width of the panel is always equal to the <code>width</code> of the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even <code>background-color</code> is not working. Does somebody knows why this behaves so strange?</p>
  
  <p>I'm using:
  Angular 4.4.5
  @angular/material: 2.0.0-beta.12</p>