How to only overwrite @material theme color for one component?

Question

The $mdc-theme-secondary: #6b2574 is already defined on top of the index.scss file.

I have a material checkbox component that by default uses the $mdc-theme-secondary as the background color. I want to change the color of the checkbox without modifying mdc-theme-secondary.

I was looking at the material documentation .

mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)

It provides this mixin, but after trying different things, I still have no idea how to use it. I couldn't find any examples either.

Thanks for any help in advance.

Answer 1

@import "@material/checkbox/mdc-checkbox";
.mdc-checkbox {
  @include mdc-checkbox-container-colors($mdc-theme-secondary, $mdc-theme-on-secondary, 
  $mdc-theme-primary, $mdc-theme-on-primary);
}

I figured out how to use the mixin... I have to select .mdc-checkbox.