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

v8wbuo2f 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(285)

我试图通过改变碳的默认颜色来创建一个自定义主题。
我已经导入了碳成分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

来源：https://stackoverflow.com/questions/57165479/how-do-i-customise-themes-in-carbon-design-system

2条答案

按热度按时间

zzwlnbp81#

@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中
对我有效，希望这能起作用。

赞(0）回复(0）举报 2023-03-29

llycmphe2#

在调试代码的几个小时后，下面是正确的过程：

@import 'carbon-components/scss/globals/scss/vendor/@carbon/themes/scss/themes';
$carbon--theme--custom: map-merge($carbon--theme--white,(
  'interactive-01': #00a183,
));

$carbon--theme: $carbon--theme--custom;
@include carbon--theme();

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

要覆盖正确的密钥，请查看此文件

carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss

问候

快-

赞(0）回复(0）举报 2023-03-29

我来回答

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

2条答案

相关问题

热门标签

最新问答