MDC button density is overridden by base button styles

[jelbourn]

The MDC button's button.scss file emits the following style:

.mdc-button {
 height: 36px;
 border-radius: 4px;
 border-radius: var(--mdc-shape-small, 4px);
 padding: 0 8px 0 8px
}

When applying button density via theme mixin, the correct height is emitted into the theme (density -2 here):

.mat-mdc-button, 
.mat-mdc-raised-button, 
.mat-mdc-unelevated-button, 
.mat-mdc-outlined-button {
 height: 28px;
 margin-top: 0;
 margin-bottom: 0
}

In the vast majority of cases, people will include their theme file in the document head. Angular, however, will append component-specific styles at the end of the head, meaning that the button's base styles will take precedence over the theme style.

[angular-automatic-lock-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.}