Question

如何使用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);

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有一些有关尺寸调整的准则。对于工具栏，在移动时高度会发生变化。

如果您需要实现一些自定义工具栏，建议您不要使用Material，因为您不再实现guildeines（但我想那只是语义）

如何覆盖角形材料源中的可变性？

1 个答案: