CODEWITHSUNDEEP
angularangular-material-15
LeO
LeO

Reputation: 5258

Overwrite CSS variables from Angular Material 15

The new Angular Material 15 has some "breaking" changes in regards of the colors and spacing. Therefore I need to overwrite the default values of the CSS variables. I define in my styles.scss

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

While the first variable is undefined and therefore the definition is taken the second variable has a value but is not overwritten.

So, how to set the variable properly?

Upvotes: 8

Views: 4723

Answers (1)

Nina
Nina

Reputation: 81

This worked for me:

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: #{map-get($myPalette, 300)};
}

Upvotes: 7

Related Questions