如何更改 Vuetify 主要文本颜色？答案

【问题标题】：How can I change Vuetify's primary text color?如何更改 Vuetify 主要文本颜色？
【发布时间】：2020-04-21 12:57:51
【问题描述】：

在一些地方，vuetify 将文本颜色设置为其主题中定义的“原色”（例如，突出显示选定的下拉菜单）。以我公司的颜色，这看起来很难看。我怎样才能将其设置为不同的？

据我所知，这来自这些 css 规则：

.v-application.primary--text {
    color: #0064a2 !important;
    caret-color: #0064a2 !important;
}

当我更改这些时，我可以使文本颜色看起来不错。不幸的是，它们是由 vuetify 生成并标记为!important，所以我似乎无法在浏览器检查器之外更改它们。

我可以在样式主题中添加类似'primary--text': 'color: #FF00FF' 的内容，但这会改变背景颜色，而不是文本颜色。

Here's a codepen example

我可以将 vuetify 的主题专门用于文本，并手动设置其余元素颜色，但这似乎不是它们的预期用途。我应该怎么做才能改变文本颜色？

【问题讨论】：

标签： html css vue.js vuetify.js

【解决方案1】：

您可以向应用添加一个类并像这样创建一个更具体的 CSS 规则（此示例实际上并未在此处运行，但您可以将其复制到您的 codepen）：

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    theme: {
      dark: true,
      themes: {
        dark: {

          // Color is applied to selected drop down item
          primary: '#0064A2',
          
          // Uncomment this to make things worse
          // 'primary--text': '#FF00FF'
        }
      }
    }
  }),
})

.my-app.v-application .primary--text {
    color: white !important;
}

<div id="app">
  <v-app class="my-app">
    <!--Click the dropdown to see ugly colors-->
    <v-select :items="[undefined]"/>
  </v-app>
</div>

【讨论】：

我想我明白你在说什么，它有效codepen。我仍然认为 vuetify 应该以不同的方式处理这个问题，但这是一个非常干净的解决方法。谢谢！

【解决方案2】：

遇到了同样的问题，罗伊的回答引导我找到了这个解决方案：

.my-app.v-application .primary--text {
    color: inherit !important;
}

这样，您就不会为使用原色的其他项目搞砸样式。

【讨论】：