时间戳

首页 > 解决方案 > 如何在使用 Vuetify v.1.5 的项目中仅覆盖 Vuetifyjs v.2 中的一种样式

vuejs2 - 如何在使用 Vuetify v.1.5 的项目中仅覆盖 Vuetifyjs v.2 中的一种样式

问题描述

我有一个使用 Vuetify v1.5 的 Nuxt 项目。但是现在，我想在不升级整个 Vuetify 模块的情况下使用 Vuetify v2 中的 v-text-field 的“大纲” css。在https://github.com/vuetifyjs/vuetify中找到概述的样式对我来说是压倒性的。有什么建议可以找到特定样式并将其应用于我当前的项目中吗？

由于 Vuetify v.1.5（ https://v15.vuetifyjs.com/en/components/text-fields），这种风格在我的项目中有效：

<v-text-field outline label="name"></v-text-field>

由于 Vuetify v.2（ https://vuetifyjs.com/en/components/text-fields#usage），这种风格在我的项目中有效：

<v-text-field outlined label="name"></v-text-field>

用轮廓覆盖轮廓样式是我的目的，但我不知道如何覆盖它，因为我在 Vuetify v.2 中找不到轮廓的具体样式。

标签： vuejs2vuetify.jsnuxt.js

解决方案

您可以覆盖或添加任何样式。但是，如果您的样式块标有作用域，您就不能这样做。尝试使用所选类的完整路径，因为这些框架（如 bootstrap 或 vuetify）使用 !important 并覆盖它并不容易。如果您可以添加一些代码行，那就太好了

推荐阅读