With Angular's newer MDC (16+) how do I change the color of a button?

When Migrating to MDC-based Angular Material Components the classes in the Angular components no longer work to override the color of a material button.

Here is a working example of the issue: https://stackblitz.com/edit/c4vkb1?file=src/example/button-example.html

This is because the material button has a Specificity of (0,2,0) (two classes), which is the same as the class in the angular component (.sample-color [_ngcontent-ng-c1823106284])



While I am aware of workaround (such as adding a tag to my CSS selector) I am hoping there are option options out there. Ideally, I would want the angular component classes of the same specificity to be of a higher precedence than the other CSS selectors in dependent libraries. (FYI I don't want to use !important)

Continue reading...