Chakra UI自定义Stepper主题不生效，已完成Step背景色无法设置

问题重现 #

尝试给已完成的Step设置自定义背景色，但主题配置未生效，原代码如下：

const CustomStepStatus = {
  variants: {
    active: {
      bg: 'primary.50', // 为激活步骤使用自定义颜色
    },
    complete: {
      bg: 'tertiary.300', // 为完成步骤使用自定义颜色
    },
  },
};

const sizes = {
  lg: {
    // 选择标题部分
    title: {
      // 将字体大小改为lg
      fontSize: 'lg',
    },
  },
}

const stepperTheme = {
  sizes,
  StepStatus: CustomStepStatus
}
export const theme = extendTheme({
    components: {
        Stepper: stepperTheme
    }
});

问题原因 #

Chakra UI的StepStatus组件样式需要指定作用到内部的container元素，直接设置bg属性无法正确关联到目标容器。

修复方案 #

修改CustomStepStatus的结构，将背景色样式嵌套在container字段下：

const CustomStepStatus = {
  variants: {
    active: {
      container: {
        bg: 'primary.50', // 激活步骤的自定义背景色
      },
    },
    complete: {
      container: {
        bg: 'tertiary.300', // 完成步骤的自定义背景色
      },
    },
  },
};

const sizes = {
  lg: {
    title: {
      fontSize: 'lg',
    },
  },
}

const stepperTheme = {
  sizes,
  StepStatus: CustomStepStatus
}
export const theme = extendTheme({
    components: {
        Stepper: stepperTheme
    }
});

额外说明 #

如果你的Chakra UI版本较旧，需检查StepStatus的样式属性结构，确保目标元素层级正确。同时确认primary.50和tertiary.300已在主题颜色配置中定义，避免因颜色不存在导致样式不生效。

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