Center text in a mat-select's mat-option

Question

I'm trying to center the text inside a <mat-option> that's nested in a <mat-select>, as such:

<mat-select #listMenu>
    <mat-option>TEST1</mat-option>
    <mat-option>TEST2</mat-option>
    <mat-option>TEST3</mat-option>
</mat-select>

And this is the desired result:

I've been able to achieve it in a very hacky way, and there's nothing in the documentation.

Any help would be appreciated.

Answer 1

Approach 1: Define the CSS styling rule in global stylesheet

styles.scss

.mat-mdc-option {
  justify-content: center !important;

  .mdc-list-item__primary-text {
    margin-right: 0 !important;
  }
}

Approach 2: Turning off the ViewEncapsulation mode

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  ...,
  styles: `
    .mat-mdc-option {
      justify-content: center !important;

      .mdc-list-item__primary-text {
        margin-right: 0 !important;
      }
    }
  `,
  encapsulation: ViewEncapsulation.None,
})

Demo @ StackBlitz

Reference: 3 Correct Ways To Overwrite Angular Material Styles