如何在 Material2 中覆盖 $md-toolbar-min-height答案

【问题标题】：How to override $md-toolbar-min-height in Material2如何在 Material2 中覆盖 $md-toolbar-min-height
【发布时间】：2017-02-09 17:00:42
【问题描述】：

我正在尝试Material 2 Sample Program

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);
}

【问题讨论】：

标签： angular sass angular-material2

【解决方案1】：

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

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

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

【讨论】：

是的，这也是我发现的。我有一个朋克demo。但这真的很糟糕，因为我们正在为md-toolbar 的内部 css 组件设置主题。这违背了拥有 UI 框架的目的。
答案被接受，因为我发布问题时就是这种情况。

【解决方案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;
  }
}

【讨论】：