Search code examples
angularangular-material

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

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

Solution

  • Okay what I think the 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