bug(button): Disable button within Directive when using prebuilt theme remains enabled

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular10-ivy-mat?file=src/styles.css

Steps to reproduce:

1. Run app
2. Command A button remains enabled (even tho its disabled via directive ssvCommand) - every 2.5sec should cycle between enable/disable
3. Comment out style import within style.css and it will as intended

Expected Behavior

When disabling a button within a Directive, when using material AND loaded a prebuilt theme, button should be styled as disabled.

Actual Behavior

Button is remained styled as enabled, even though its disabled

Environment

• Angular: 10.0.9
• CDK/Material: 10.2.5
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Note this on material 8/9 used to work, updated to 10.x and it didn’t

[crisbeto]

It probably worked on 9.x, because we used to use the disabled attribute for styling. In 10.x we started using the mat-button-disabled class in order to support the case where a button appears disabled, but it’s still focusable.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}