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

2 个答案: