TDesign 组件的自定义主题色为啥不生效？

皇甫熙炫提问于 2026-03-19 08:49:17 阅读 13

组件

我在项目里用了 TDesign Vue 组件库，想把主色改成公司品牌色 #FF6B35，但改完后按钮、输入框这些组件颜色还是默认的蓝色，完全没变。

我按照文档在 main.js 里引入了自定义变量文件，也确认 CSS 变量名是对的，但就是不起作用。是不是覆盖方式有问题？

:root {
  --td-brand-color: #FF6B35;
  --td-brand-color-6: #FF6B35;
}

我来解答赞 5 收藏

反馈

1 条解答

Mr-艳艳 Lv1

你这个问题挺常见的，TDesign 的主题色其实不是直接用 CSS 变量，是在构建阶段通过 SCSS 变量生成的。

你直接在 :root 写 CSS 变量大概率不行，因为 TDesign 组件内部的样式优先级可能更高。

正确的做法是在项目的构建配置里覆盖 SCSS 变量。比如用 Vite 的话，在 vite.config.js 里加这么一段：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'



export default defineConfig({

  plugins: [vue()],

  css: {

    preprocessorOptions: {

      less: {

        modifyVars: {

          '@brand-color': '#FF6B35',

        },

        javascriptEnabled: true,

      },

    },

  },

})

或者如果你用的是 less 作为预处理器（Vue 版默认是 less），改成对应的配置。

还有个更直接的办法——在你的全局样式文件里，用更高优先级的选择器强行覆盖：

.t-button--primary {

  --td-brand-color: #FF6B35 !important;

  background-color: #FF6B35 !important;

  border-color: #FF6B35 !important;

}

不过这种写法比较 hack，组件多了就蛋疼了。

建议走第一个方案，在构建配置里把 SCSS 变量覆盖掉，一劳永逸。你是什么构建工具？Vite 还是 Webpack？

2026-03-19 09:07