Text in mat-raised-button is invisible within mat-toolbar

Question

This simple code:

<mat-toolbar color="primary">
    <button mat-raised-button>Basic</button>
</mat-toolbar>
<button mat-raised-button>Basic</button>

Give me this result : screenshot

It seems that it is a know bug : https://github.com/angular/material2/issues/4614

I need a clean workaround, can someone help me ? Thanks.

Answer 1

i wrote my theme in /style.scss. The color i chose for my primary palette influence the reproductability of the bug.

For exemple, this doesn't works :

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

But this works :

$candy-app-primary: mat-palette($mat-green);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

I just changed $mat-indigo to $mat-green and now my text is visible screenshot

What's going on ?