Vuetify 自定义样式的 vuetify 组件，如 v-textarea 和 css答案

【问题标题】：Vuetify custom styling of vuetify components like v-textarea with cssVuetify 自定义样式的 vuetify 组件，如 v-textarea 和 css
【发布时间】：2021-04-03 10:48:02
【问题描述】：

如何使用 css 定位 vuetify v-textarea 的底层 html textarea？就我而言，我想更改 v-textarea 的行高、字体系列、颜色等。它不是这样工作的：

<v-textarea class="custom-textarea"></v-textarea>

.custom-textarea {
  line-height: 1;
  color: red;
}

我还尝试了其他几个选择器，例如 v-textarea、.v-textarea、v-text-field__slot，但这些都不起作用。 textarea 的正确选择器是什么？

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

为了覆盖一个深层元素，您需要通过深层选择器访问该元素，例如

::v-deep .v-textarea textarea

More information about deep selectors

【讨论】：

【解决方案2】：

.custom-textarea textarea {
  line-height: 1;
  color: red;
}

【讨论】：

【解决方案3】：

设置`id` text-area 的prop 并通过id 应用css 样式。

<v-textarea id="input-7-2"></v-textarea>

#input-7-2 {
  color:white;
  background-color: green;
  line-height:1;
}

Codepen demo

【讨论】：

设置id text-area 的prop 并通过id 应用css 样式。

设置`id` text-area 的prop 并通过id 应用css 样式。