html 如何在本地更改Vuetify输入的字体大小？

ia2d9nvy 于 2023-05-15 发布在其他

关注(0)|答案(1)|浏览(143)

给定以下Vuetify Textfield组件
Playground

<v-text-field label="Label goes here" model-value="Value goes here"></v-text-field>

通用字体大小对我的应用程序来说太大了。我想降低标签和文字的大小。我试过的短信

.v-text-field input {
    font-size: 10px;
}

但是我不知道标签的CSS选择器，这对我不起作用

.v-text-field label {
    font-size: 8px;
}

第二个问题是，这个解决方案只有工作没有scoped属性，我不知道为什么。
你有什么主意吗？此问题可能与How Do I change font-size in vuetify component重复

1条答案

首先回答第二个问题，作用域CSS仅适用于组件中的元素。:deep()选择器允许你选择嵌套的元素，例如：

:deep(.v-text-field input) {
    ...
}

文档对此解释得相当清楚。
标签本身可以这样定位：

:deep(.v-label.v-field-label.v-field-label--floating){
  --v-field-label-scale: 0.75em; /* .75em is the default value */
}

v-input中的元素使用相对大小，因此您也可以将它们设置在一起。只有非浮动标签（当没有设置输入时）必须取消设置才能工作：

:deep(.v-field){
  font-size: 12px;
}
:deep(.v-label.v-field-label){
  font-size: inherit;
}

虽然不确定动画...
这里是一个Playground，你可以看到它是如何一起变化的