在 Vuetify 中设置全局文本颜色答案

【问题标题】：Set global text color in Vuetify在 Vuetify 中设置全局文本颜色
【发布时间】：2021-01-09 00:26:47
【问题描述】：

我已经设置了一个带有 sass 全局变量的 Vuetify 应用程序，更改了默认字体样式。但是，我无法找到字体/文本颜色的设置。在 $material-light 和 $material-dark 变量下有一个 text-color 属性，我认为这是要设置的正确属性，但还没有设法让它工作。

在 /sass/variables.sass 中

$material-light: map-deep-merge(( 'text-color': #554946 ), $material-light)

这会导致无效的 CSS 属性“文本颜色”错误。知道更改此属性的正确方法是什么吗？

【问题讨论】：

【解决方案1】：

最简单的方法是简单地将字体系列设置为body。如果您正在使用 webpack 并导入 Vuetify stylus 条目 main.styl，您可以简单地用您想要的任何字体覆盖 $font-family 变量。

【讨论】：

澄清一下，设置字体系列不是问题。我已经使用 variables.sass 中的 $body-font-family 成功地做到了这一点。只有颜色是个问题，因为即使通过 body 设置全局颜色，各个 vuetify 组件也会将其覆盖回黑色。