我如何更改 material.io Web 组件填充颜色 (mdc-top-app.bar)

Question

我一直在研究用于网络的谷歌材料设计，并且对SASS. 就目前而言，我一直在尝试更改mdc-top-app-bar使用fill-color($color)框架中提供的 sass mixin的背景颜色。

试过这几行

@use '@material/button/mdc-button';
@use '@material/button';
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/icon-button/mdc-icon-button";

.mdc-top-app-bar {
    @include mdc-top-app-bar.fill-color(#8e44ad);
}

显示以下错误消息

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ?
10 ?     @include mdc-top-app-bar.fill-color(#8e44ad);    
   ?     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

Answer 1

我完全煮熟了最后一个答案，但我已经解决了。

代替：

@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/icon-button/mdc-icon-button";

用：

@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/icon-button/mdc-icon-button";

然后使用 mixin，而不是：

.mdc-top-app-bar {
    @include mdc-top-app-bar.fill-color(#8e44ad);
}

用：

.mdc-top-app-bar {
    @include mdc-top-app-bar-fill-color(#8e44ad);
}

我希望这有帮助

——纳撒尼尔