Как переопределить переменный в угловом материале источник?

Question

Как переопределить высоту панели инструментов mat с помощью переменных scss?

В источнике панели материалов mat есть переменная $mat-toolbar-height-desktop, установленная на 64px, и я хочу изменить на32px с использованием потока scss:

styles.scss:

$mat-toolbar-height-desktop: 34px;

@import '~@angular/material/theming';

@include mat-core();

$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);

$ng-io-warn: mat-palette($mat-red);

$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);

@include angular-material-theme($ng-io-theme);

Answer 1

Тебе не нужно, Angular Material помог тебе.

Просто используйте более тонкий CSS-селектор, чтобы изменить высоту.style="", будучи самым лучшим, вы можете использовать это, как показано в this stackblitz :

<mat-toolbar color="primary" [style.margin-bottom.px]="12">My App</mat-toolbar>
<mat-toolbar [style.height.px]="200" color="primary">My App</mat-toolbar>

Будьте осторожны, так как Материал имеет некоторые рекомендации по размеру.В случае панелей инструментов высота меняется, когда вы находитесь на мобильном телефоне.

Если вам нужно реализовать какую-то собственную панель инструментов, я советую вам не использовать Material, так как вы больше не используете guildeines (но я думаю, это просто семантика)