Styling mat-select-value per component

Question

I'm trying to style mat-select's differently per component. I have 1 main select in my (always visible) header, and multiple in different components within my SPA. I'm trying to style the header mat-select differently because it has a dark background, the rest should be unstyled, and not affected by the header styling.

I've tried using ngClass & ngStyle, but they don't add the required classes to childs, just to the main class. I've tried using ::ng-deep and /deep/ but they alter the styling of components in other parts of the application. So technically they work, but with the wrong result.

https://stackblitz.com/edit/angular-kzwatd

I'm hoping to just alter the text color to white, since the background of the mat-select is dark.

Anyone have any clue why the stackblitz is not working?

Akshay Rana Akshay Rana · Accepted Answer · 2019-08-07T13:52:42

Try using :

  <mat-select class="main" placeholder="Main"> ....

  /deep/ .main .mat-select-value{
    color: red;
  }

https://stackblitz.com/edit/angular-rucggb?file=src/app/main-component.css

Styling mat-select-value per component

1 Answers