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

【问题标题】：How do i change material.io web component fill-color (mdc-top-app.bar)我如何更改 material.io Web 组件填充颜色（mdc-top-app.bar）
【发布时间】：2020-03-13 17:17:43
【问题描述】：

我一直在研究用于 web 的谷歌材料设计，并且对 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);    
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

【问题讨论】：

标签： sass material-components-web

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

希望对你有帮助

--纳撒尼尔

【讨论】：

成功了！破折号应该比句号更容易解析。我猜是名称冲突？
是的，我想是的

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

【讨论】：