Как изменить цвет заливки веб-компонента material.io (md c -top-app.bar)

Question

Я изучал дизайн материалов Google для веб-сайтов, а также совершенно не знаком с 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);
}

Надеюсь, это поможет

- Натаниэль