如何全局覆盖 Vuetify 组件的样式

Question

我正在尝试使用vuetify设置我的按钮，但我不想每次都设置按钮的背景颜色和样式，或者其他任何vuetify组件。 如何为像按钮、芯片、头像等组件设置全局样式最佳实践？ 我知道我可以创建自己的组件来实现，但那样就没有使用vuetify的理由。 我有一个nuxt项目，但同样适用于vue。

- shaked

---

这可能会有所帮助：轻松通过编程方式更改应用程序的颜色。 - palaѕн

自定义主题对于颜色和断点非常方便。如果您需要默认情况下在VBtn上设置某些样式属性，例如“rounded”，则最简单的方法仍然是为vuetify组件制作自己的包装器组件。 Vuetify在动画、a11y、易于定制等方面做了很多工作，因此运行自己的自定义实现仍然比扩展VBtn并设置prop要更费力。不会称之为“没有理由使用” ;p - Excalibaard

我已经进行了更改，但是我没有看到覆盖默认组件（如按钮）的部分。也许需要进入根CSS文件并更改btn类或类似的内容，但这样做可能会影响其他功能。 - shaked

我会查看包装组件，但是有没有一种方法可以在项目的任何地方使用按钮组件而无需导入语句？如果您还可以发送示例链接，这将非常有用。 - shaked

Answer 1

可能不是最好的做法，但这就是我正在做的：

1. 在您的资产文件夹中创建全局样式文件（例如main.scss）。
2. 将其插入到nuxt.config.js中： css: ["~assets/styles/main.scss"]
3. 为您的应用程序根元素添加类（例如在默认布局中）
4. 创建_vuetify.scss以覆盖Vutify样式，并在main.scss中导入它

5. 在应用程序根类的范围内编写您的Vuetify样式以获得选择器权重。

   .app .v-toolbar { background-color: red; }

如果这太麻烦了，或者作为快速解决方案，您可以在默认布局中使用应用程序根类进行全局样式编写。

- Dvdgld

---

我不确定这是否是最佳实践，但我考虑在layout.vue中添加一个scss，它将覆盖vuetify样式，但这将需要导入到每个布局中，这很好，因为通常你不会有很多像这样的布局。 - shaked