如何覆盖 Material2 中的 $md-toolbar-min-height

Question

md-toobar默认高度为64px，定义在
material toobar.scss

@import '../core/style/variables';

$md-toolbar-min-height: 64px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;

如何在 sample app material2-app-theme.scss 中将其覆盖为 32px？

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

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

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

Answer 1

您不能覆盖特定变量，因为 material2 组件中已经烧录了。 Scss 编译已经针对 md-toolbar 特定样式执行。你可以这样做：

md-toolbar {
  min-height: 32px !important;
}
md-toolbar md-toolbar-row {
  height: 32px !important;
}

在您的自定义主题中。我找不到任何优雅的解决方案。

Answer 2

我知道这个问题有点老了，但我们遇到了类似的问题，我们需要更改颜色和其他全局样式以适合我们的品牌。我想我会分享我们对上述答案的变化。我们希望在我们的 sass 中避免使用“!important”，并且能够在我们构建应用程序时重用样式，因此我们将覆盖选择器添加到我们的全局 sass 文件中。然后我们可以将覆盖选择器添加到我们想要覆盖的任何 md 元素。这使我们能够更具体地说明我们要覆盖的内容。

下面的示例显示了背景颜色和工具栏高度覆盖。仍然违反框架，但从品牌的角度来看，您至少需要控制颜色。另请注意，如果您想将新的选择器添加到覆盖 sass，您只需附加到 md 选择器列表即可。

<!-- md-toolbar example -->
<md-toolbar class="my-app-toolbar my-app-bg-color"></md-toolbar>

// override bg-color for md-button, md-card-content, md-toolbar
.md-button,
md-card-content,
md-toolbar {
  &.my-app-bg-color {
    background-color: #00acc1;
  }
}

// override md-toolbar
md-toolbar {
  &.my-app-toolbar {
    min-height: 32px;
    height: 32px;
  }
}

如何覆盖 Material2 中的 $md-toolbar-min-height

How to override $md-toolbar-min-height in Material2

sass

angular-material2

angular