Why text in some of my Angular Material component appears to be white?

user_15394199 0
Viewed 198

In some of my mat components, like mat-tab-group, the text appears to be white and invisible. My theme is pink blue-grey. here's the code

<mat-tab-group>
    <mat-tab label="First" > Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

The image of what's going on:

happening2

When highlighted by the cursor happening1

angular-material angular
2 Answers

Okay what I think he problem was that my theme was dark theme. I went to project/index.html and added

<body class="mat-typography mat-app-background">

which changed background to dark

user_153941990

This is the common problem occuring since Angular Material version 0.11. Components inside toolbars are being colored white. This problem occurs in e.g.: md-toolbar, md-fab-actions, md-raised, and mat-tab.

user_169022510
Related