如何在 Carbon Design System 中自定义主题？答案

【问题标题】：How do I customise themes in Carbon Design System?如何在 Carbon Design System 中自定义主题？
【发布时间】：2019-07-23 13:39:46
【问题描述】：

我正在尝试通过更改碳的默认颜色来创建自定义主题。

我已经导入了碳组件 scss 文件，并按照建议设置了变量 $carbon-theme，但它不起作用。我已将它们导入到我的主 index.scss 文件中。我最终想更改颜色变量并创建自定义主题。

这是我的index.scss 文件

@import 'carbon-components/scss/globals/scss/styles.scss';
@import '@carbon/themes/scss/themes';
@include carbon--theme($carbon--theme--g100);

body {
  background-color: $ui-02;
}

这是我正在尝试创建的 mixin。

@mixin custom-color {
  $focus: green;
}

以上行不通。主题不会更改为预期的深灰色背景。我该怎么做呢？另外，我将如何创建 mixin 来设置其他颜色？

【问题讨论】：

标签： reactjs

【解决方案1】：

@import '@carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
@include carbon--theme();

@import 'carbon-components/scss/globals/scss/styles.scss';


body {
  background-color: $ui-02;
}

而不是将其放入index.scss，将其放入App.scss并导入App.js

为我工作，希望这个工作。

【讨论】：