Vuetify 文本颜色变体

Posted 2023-02-22

【中文标题】Vuetify 文本颜色变体

【英文标题】：Vuetify text color variants

【发布时间】：2019-07-05 19:50:23

【问题描述】：

我想为文本使用其中一种颜色变体，我该怎么做？我试过了：

<h2 class="red--text lighten-1--text">My Address</h2>

<h2 class="red--text lighten-1">My Address</h2>

<h2 class="red-lighten-1--text">My Address</h2>

和许多其他变体，但我似乎只能让文本变为基本红色，而不是列出的变体here。有人可以帮忙吗？

【参考方案1】：

class="red--text text--lighten-5"

来自文档

文本颜色还支持使用文本变暗和变亮变体--lighten|darken-n

或者您可以检查元素并从那里获取类

【讨论】：

该死，我现在看到了，不知道为什么我没有读那行。谢谢老兄。

你在哪里设置整个应用程序的默认文本颜色？似乎无法找到一个变量！ Vuetify 增加了 0.87 的不透明度，但我不确定这发生在哪里

vuetifyjs.com/en/features/theme/#customizing

【参考方案2】：

你必须这样使用它：

<h2 class="red--text text--lighten-1">My Address</h2>

对于darken-n 和lighten-n，预先附加text 而不是附加它。

实际上，在文档中甚至有一个 example 几乎和你的一样：

<template>
  <div>
    Lorem ipsum dolor sit amet, <strong class="red--text text--lighten-1">inciderint</strong> definitionem est ea, explicari prodesset eam id. Mazim doctus vix an. <span class="indigo--text text--darken-2">Amet causae probatus nec ex</span>.
  </div>
</template>

演示here:

<h2 class="red--text text--lighten-1">My Address</h2>.
<h2 class="red--text text--lighten-2"> My Address</h2>.

结果是这样的：