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

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

组件

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

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

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

我来解答赞 3 收藏

反馈

1 条解答

诗辰 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