Styling mat-select in Angular Material

When customizing the appearance of mat-select, you may encounter challenges in styling its panel component. Despite following the recommended approach of using the panelClass property to specify custom styles, the styles fail to apply, leaving you perplexed.

Why the Styles Don't Work

Angular Material uses mat-select-content as the class name for the select list content. To style this component, several methods are available:

1. Using ::ng-deep

Employ the ::ng-deep shadow-piercing descendant combinator to force styles through child components.

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2. Using ViewEncapsulation

Configure the component's view encapsulation to None, allowing styles to escape the component's isolation.

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. Setting Class Style in style.css

Use the style.css file to define custom styles, enforcing them with !important to override any existing styles.

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4. Using Inline Style

Apply inline styles directly to the mat-option elements, overriding any inherited styles.