如何使用scss变量覆盖工具栏高度?
在材料垫工具栏源中,有一个variable $mat-toolbar-height-desktop
设置为64px
,我想使用scss flow更改为32px
:
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);
答案 0 :(得分:0)
您不需要,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有一些有关尺寸调整的准则。对于工具栏,在移动时高度会发生变化。
如果您需要实现一些自定义工具栏,建议您不要使用Material,因为您不再实现guildeines(但我想那只是语义)