Angular-mdc 返回 "No mixin named mdc-top-app-bar-fill-color"

Question

所以，我正在使用 angularCLI 和 angular-MDC，我想使用 styles.scss 的第二种颜色。现场有 https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/top-app-bar-demo/sass 这个语法 mdc-top-app-bar-fill-color($color) 我用过 returns No mixin named mdc-top-app-bar-fill-color，下面是我的代码：

component.html

<mdc-top-app-bar class="header-mdc" [mdcElevation]="5">
  <div style="text-align: center">
    <h1>Autonomous</h1>
  </div>
</mdc-top-app-bar>

component.scss

.header-mdc {
  @include mdc-top-app-bar-fill-color($mdc-theme-secondary);
}

styles.scss

$mdc-theme-primary: #6200ee; // primary color
$mdc-theme-secondary: #FFFFFF; // secondary color

@import '~@angular-mdc/theme/material';

body {
  font-family: 'Roboto Thin';
  margin: 0;
  padding-top: 0.1px;
}

错误

@include mdc-top-app-bar-fill-color($mdc-theme-secondary);
          ^
      No mixin named mdc-top-app-bar-fill-color

Answer 1

如果您将 @import '~@angular-mdc/theme/material'; 放在 component.scss 文件的顶部，它应该可以工作。

虽然这感觉有点不妥，但我相信还有更好的方法。

Angular-mdc 返回 "No mixin named mdc-top-app-bar-fill-color"

Angular-mdc returning "No mixin named mdc-top-app-bar-fill-color"

angular

scss-mixins

mdc-components

component.html

component.scss

styles.scss

错误