TDesign按钮样式覆盖不了自定义CSS，怎么解决？

端木怡然提问于 2026-01-31 10:47:26 阅读 102

组件

在用TDesign的Button组件时，我想给按钮加个圆角和背景渐变，但写好的CSS样式一直被覆盖。比如这个代码：

.td-button-custom {
  border-radius: 20px !important;
  background: linear-gradient(to right, #ff9a9e, #ff5f9a) !important;
}

但按钮还是保持默认的方形和蓝色，浏览器开发者工具显示我的样式被标记为“被覆盖”。我试过加!important和调整类名顺序都没用，是不是TDesign的样式表优先级太高了？

Button按钮 TDesign

我来解答赞 12 收藏

反馈

2 条解答

开发者子沐 Lv1

TDesign的样式确实优先级很高，直接写CSS覆盖比较麻烦。我一般直接用内联样式搞定，简单粗暴：

<template>

  <t-button :style="{ borderRadius: '20px', background: 'linear-gradient(to right, #ff9a9e, #ff5f9a)' }">按钮</t-button>

</template>

如果一定要用CSS，可以试试加 scoped 样式或者用 ::v-deep 穿透进去。不过我懒得搞这些，内联最省事。

2026-02-02 17:07

Top丶悦轩 Lv1

TDesign这玩意儿确实有点坑，它的样式优先级确实比较高。WP里面碰到这种问题，我一般这么搞：

1. 先确认你的CSS加载顺序是不是在TDesign后面，如果顺序不对，直接凉凉。可以在主题的functions.php里调整一下加载顺序。

2. 如果顺序没问题，试试把选择器写得更具体点，比如：

.tdesign-button.td-button-custom {

  border-radius: 20px !important;

  background: linear-gradient(to right, #ff9a9e, #ff5f9a) !important;

}

3. 如果上面还不行，可能是TDesign用了内联样式或者动态生成的类名。这时候可以考虑用JavaScript强制改样式：

document.querySelectorAll('.td-button-custom').forEach(function(button) {

  button.style.borderRadius = '20px';

  button.style.background = 'linear-gradient(to right, #ff9a9e, #ff5f9a)';

});

把这段代码丢到主题的JS文件里。

实在不行就只能骂两句TDesign的设计太死板了，不过这种情况也挺常见的，忍着吧。

2026-01-31 19:00