Carbon UI组件定制：部分Sass令牌无法设置的原因咨询

核心原因：令牌类型区分未明确标注 #

Carbon的Sass令牌实际分为两类，官方文档未清晰说明这一差异：

• 全局基础令牌：比如$text-on-color，属于设计系统的核心底层变量，是所有组件样式的依赖基础，支持通过@use '@carbon/react' with (...)直接覆写。
• 组件派生令牌：比如$button-primary，这类令牌是基于全局令牌计算生成的组件专用变量，并非暴露给用户直接通过@use with配置的，直接设置会触发Sass语法错误。

正确的组件样式定制方式 #

针对按钮这类组件的个性化需求，需使用Carbon官方提供的组件级定制方案：

1. Sass映射定制（编译时）
   通过组件专属的Sass映射覆盖样式，以主按钮为例：

   @use '@carbon/react';
   @use '@carbon/react/components/button' with (
     $button: (
       primary: (
         background: red,
         hover-background: darkred,
         active-background: darken(red, 10%),
       )
     )
   );
   

2. CSS变量覆盖（运行时）
   直接通过CSS变量修改组件样式，无需修改Sass代码：

   .cds--btn--primary {
     --cds-button-primary-background: red;
     --cds-button-primary-hover-background: darkred;
   }
   

设计意图说明 #

这种“部分令牌可直接配置、部分需通过组件API定制”的行为是有意设计的：

• 全局令牌用于维持整个设计系统的视觉一致性，避免零散修改破坏规范；
• 组件派生令牌基于全局令牌生成，通过组件级定制入口开放个性化能力，既满足定制需求，又保证设计系统的可控性。

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