React项目中Carbon Design System V11全局主题令牌自定义方法咨询

在Create React App中使用@carbon/react时，要全局覆盖$interactive-01、button-primary这类主题令牌，核心是通过Sass的map.merge扩展原有主题配置，再传递给Carbon的主题模块。具体实现如下：

步骤1：修改App.scss配置 #

替换你当前的全局主题代码为以下内容，按需调整自定义颜色值：

// 引入Carbon主题模块与Sass工具函数
@use '@carbon/react/scss/themes';
@use 'sass:map';

// 基于g100主题创建自定义配置，覆盖指定令牌
$custom-theme: map.merge(themes.$g100, (
  // 覆盖全局交互式主色（对应原$interactive-01令牌）
  'interactive-01': #2d6baf,
  // 若需覆盖按钮专属状态色（如主按钮hover色），可添加对应键值对
  'interactive-02': #1f4a7a,
));

// 应用自定义主题到Carbon
@use '@carbon/react/scss/theme' with (
  $theme: $custom-theme,
);

// 引入Carbon全局样式
@use '@carbon/react';

关键说明 #

• 令牌对应关系：Carbon V11中button-primary的默认背景色绑定到interactive-01令牌，修改该令牌会同步生效到所有使用主色的组件（按钮、链接等）。若需单独调整按钮样式而非全局主题，可在引入按钮组件样式前覆盖组件级变量，但这不属于主题令牌的全局覆盖范畴。
• 查看可用令牌：若不确定要覆盖的令牌名称，可在Sass中添加@debug map.inspect(themes.$g100);，编译时会输出g100主题的完整令牌键值对，方便定位目标令牌。
• 环境要求：确保项目已安装sass包（Create React App需依赖sass处理SCSS，推荐使用官方维护的sass而非已废弃的node-sass）。

验证效果 #

修改后重启开发服务器，检查按钮、交互式元素的颜色是否已更新为自定义值，也可通过浏览器开发者工具查看元素样式，确认Carbon的主题变量已被替换。

内容的提问来源于stack exchange，提问作者user19746536