How to Style the Angular Material mat-select Panel?

Styling the mat-select Panel in Angular Material

Issue

When customizing the mat-select component's panel using panelClass, CSS styles fail to apply despite proper class assignment in the HTML template.

Solution

For Angular 9 and later versions:

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

For Angular 2.0.0-beta.12 and earlier versions, there are several options to style the panel:

Option 1: Using ::ng-deep

This method utilizes the ::ng-deep combinator to penetrate the component's view encapsulation:

<code class="css">::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}</code>

Option 2: Using ViewEncapsulation

By setting the encapsulation mode to None in the component metadata, CSS styles are no longer encapsulated within the component's view:

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>

Option 3: Set class style in style.css

Apply styles directly to the .mat-select-content class in the external style.css file, using !important to force application:

<code class="css"> .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } </code>

Option 4: Using inline style

Define inline styles directly within the HTML template:

<code class="html"><mat-option style="width:2000px; background-color: red; font-size: 10px;" ...></mat-option></code>

The above is the detailed content of How to Style the Angular Material mat-select Panel?. For more information, please follow other related articles on the PHP Chinese website!