How do i change material.io web component fill-color (mdc-top-app.bar)

user_7069606 0
Viewed 812

I have been looking into google material design for web and am also totally new to SASS. As it stands, i have been trying to change the background-color for the mdc-top-app-bar using the sass mixin fill-color($color) provided in the framework.

Having tried these few lines

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

Am displayed with the follow error messages

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);    
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
material-components-web sass
2 Answers

I completely cooked the last answer but I have worked it out.

instead of:

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

use:

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

and then to use the mixin, instead of:

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

use:

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

I hope this helps

--Nathaniel

user_118396250

To avoid import statement you should do:

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

and then

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

Also you can create alias

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

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