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

Question

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

尝试过这几行

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

希望这有帮助

--纳撒尼尔