angularsassangular-materialmat-select

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

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:

enter image description here

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

Any help would be appreciated.

Solution

  • 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