sass - 我如何更改 material.io Web 组件的填充颜色（mdc-top-app.bar）

Question

我一直在研究 google material design for web 并且对SASS. 就目前而言，我一直在尝试使用框架中提供mdc-top-app-bar的 sass mixin更改背景颜色。fill-color($color)

尝试了这几行

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

我希望这有帮助

——纳撒尼尔

Answer 2

为避免导入语句，您应该执行以下操作：

@use "@material/top-app-bar";

接着

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

您也可以创建别名

@use "@material/top-app-bar" as topbar;

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