TDesign Steps步骤条怎么自定义激活状态的颜色？

设计师奕洳提问于 2026-03-18 09:09:23 阅读 12

组件

我用 TDesign 的 Steps 组件，想把当前激活步骤的主色从蓝色改成紫色，但改了全局主题色没生效。试过直接覆盖 CSS 类名也不行，是不是我选错选择器了？

这是我的覆盖样式：

.t-steps__item--active .t-steps__title,
.t-steps__item--active .t-steps__description {
  color: #7e22ce !important;
}
.t-steps__item--active .t-steps__inner {
  border-color: #7e22ce !important;
}

我来解答赞 1 收藏

反馈

1 条解答

打工人慧娇 Lv1

TDesign 用 CSS 变量控制颜色，你覆盖的具体属性被变量优先级盖过了。

直接覆盖 CSS 变量：

.t-steps {

  --td-steps-icon-active-bg: #7e22ce;

  --td-steps-icon-active-border-color: #7e22ce;

  --td-steps-text-active-color: #7e22ce;

}

如果用 Vue/React 的 theme API 也可以这样：

// Vue

import { Steps } from 'tdesign-vue';

Steps.props.theme = { color: '#7e22ce' };



// React  

import { Steps } from 'tdesign-react';

const customTheme = { color: '#7e22ce' };

<Steps theme={customTheme} />

2026-03-18 14:08