如何只覆盖一个组件的@material 主题颜色？答案

【问题标题】：How to only overwrite @material theme color for one component?如何只覆盖一个组件的@material 主题颜色？
【发布时间】：2019-05-16 06:08:15
【问题描述】：

$mdc-theme-secondary: #6b2574 已在 index.scss 文件的顶部定义。

我有一个材质复选框组件，默认情况下使用$mdc-theme-secondary 作为背景颜色。我想在不修改mdc-theme-secondary 的情况下更改复选框的颜色。

我在看the material documentation 。

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

它提供了这个mixin，但是在尝试了不同的东西之后，我仍然不知道如何使用它。我也找不到任何例子。

提前感谢您的帮助。

【问题讨论】：

您是否尝试添加您自己的具有更高特异性的类？
是的。我尝试过类似的方法：.checkbox-background{ background-color: red}。我可以用chrome覆盖它。但它总是被#mdc-theme-secondary@AdamOrlov覆盖

标签： css sass material-components material-components-web

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

我想出了如何使用 mixin...我必须选择 .mdc-checkbox。

【讨论】：