TDesign Input输入框高度怎么改不了？

怡彤提问于 2026-02-24 19:10:18 阅读 24

组件

我用 TDesign 的 Input 组件，想改高一点，但加了 height 好像没生效，是不是被内部样式覆盖了？

我试过直接在组件上加 style，也试过用 class 覆盖，都不行。控制台看元素，发现 input 被包了好几层 div，真正的 input 还是原来的高度。

.my-input {
  height: 48px !important;
}
.t-input__inner {
  height: 48px !important;
}

我来解答赞 7 收藏

反馈

2 条解答

♫文婷 Lv1

兄弟，TDesign 的 Input 改高度确实有点坑，它内部结构比较复杂，你覆盖的 .t-input__inner 可能选错目标了。

试试用 CSS 变量，这是 TDesign 官方推荐的方式：

.my-input {

  --td-input-height: 48px;

  --td-input-padding: 0 16px;

}

如果 CSS 变量不行，那就直接干外层：

.my-input .t-input {

  height: 48px;

}



.my-input .t-input__inner {

  height: 100% !important;

}

JS里面如果用的是 Vue，可以这样：

<t-input class="my-input" />

.my-input {

  --td-input-height: 48px;

}

核心问题是你得覆盖到正确的类名，t-input 外层 div 才是控制高度的关键，inner 那个是继承高度的。先试试 CSS 变量，不行再暴力覆盖。

2026-03-10 23:38

诗辰 Dev Lv1

你这问题我太熟悉了，TDesign 的 Input 确实坑在这儿——它把高度控制拆到多个层里，光改 .t-input__inner 不够，得连带外壳一起改。

先看结构：div.t-input 包着 div.t-input__inner，再包着真正的 input，三者都得设高度。

你这样写试试：

<div class="my-input">

  <t-input />

</div>

.my-input,

.my-input .t-input,

.my-input .t-input__inner,

.my-input .t-input__inner input {

  height: 48px !important;

  line-height: 48px !important; /* 这行很重要，不然文字垂直居中会乱 */

  box-sizing: border-box !important;

}

注意 box-sizing 要设成 border-box，不然 padding 会让实际高度超标。

要是你用的是 Vue 或 React 的 scoped 样式，记得加 :deep() 或 ::v-deep穿透，比如 Vue3：

:deep(.my-input .t-input) {

  height: 48px;

}

拿去改改，一般都能搞定。

2026-02-24 19:11