Material buttons do not allowed a font-weight overwrite

Bug

MatButtonModule

What is the expected behaviour?

when being specific with a css class or when using inline styling a Matbutton should allow a overwrite of the styling on the * { font-weight: 300 }

What is the current behaviour?

font-weight is not being overwritten on the matButtons when using a class or inline styling when a asterisk/universal selector with font-weight is used on everything.

What are the steps to reproduce?

using a * selector to target every font-weight on all the pages and then trying to change the mat button with a class or inline styling see https://stackblitz.com/edit/angular-2nryr7

What is the use-case or motivation for changing an existing behaviour?

Trying to change the font-weight on the text inside the material button

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular & Angular material version 7.0.1

Google Chrome build 70.0.3538.77 (64-bit) Firefox Quantum 63.0.2 (64-bit) Microsoft Edge 42.17134.1.0 (64-bit) Opera 56.0.3051.52 (64-bit)

Microsoft Windows Prof 64 bit

Is there anything else we should know?

As shown in the stackblitz page the overwriting of the styling works as it should on the normal button and on other elements like paragraph.

[crisbeto]

@justixnl you can’t see the font-weight in your example because of view encapsulation. Here’s a working fork: https://stackblitz.com/edit/angular-dy2bsj.

[Mastermindzh]

The selectors work fine, the example demonstrates that the selectors work on regular buttons/elements but not on material buttons.

It only fails when you add the material classes/directives (e.g mat-raised-button).

Try adding “mat-raised-button” to the regular, working, button and you can see it fail for yourself.