Material Design compact: Select / DropDown doesn't react on density

Question

I use Material design in my Angular app.

Some elements like the mat-select have a very high density - these elements are anything but compact.

The common way to render the layouts more compact in Material design is the density-property of the theme.

I tried different ways to the the density - and it applies fine for buttons and other elements. But the mat-select stays big as always.

Using of mat-select:

<mat-form-field appearance="fill">
    <mat-label>Granularität</mat-label>
    <mat-select [(value)]="this.settings.granularity">
        <mat-option value="day">täglich</mat-option>
        <mat-option value="week">wöchentlich</mat-option>
    </mat-select>
</mat-form-field>

Try 1 (no effect):

@include mat.select-density(-3);

Try 2 (density for complete theme, no change for mat-select):

$my-app-theme: mat.define-light-theme((
        color: (primary: $my-app-primary, accent: $my-app-accent, warn: $my-app-warn),
        typography: mat.define-typography-config(),
        density: -3,
    ));

mat-select unchanged big:

Answer 1

I just encountered the same problem using angular material v15.2.3. It seems that the correct styling was added with this commit: https://github.com/angular/components/commit/d0cd9bb3ec1552c67797d0b063db7732d211a815

In my installed version, the density mixin in src/material/select/_select-theme.scss looks as follows:

@mixin density($config-or-theme) {}

No wonder it has no effect...

So, upgrading to the newest version might be the solution