1

我正在尝试材料 2 示例程序

md-toobar 的默认高度是 64px，定义在
材料 toobar.scss

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

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

如何在示例应用程序 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);
}
4

2 回答 2

3

您不能覆盖特定变量，因为 material2 组件中已经烧毁了。已经针对 md-toolbar 特定样式执行了 scss 编译。您可以执行以下操作：

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

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

于 2016-10-14T14:17:33.880 回答
1

我知道这个问题有点老了，但我们有一个类似的问题，我们需要改变颜色和其他全球风格以适应我们的品牌。以为我会在上面的答案中分享我们的变化。我们希望在我们的 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;
  }
}
于 2017-06-01T23:02:10.583 回答