Vue 3 - Vuetify 3：颜色——文本不起作用

Posted 2023-02-22

【中文标题】Vue 3 - Vuetify 3：颜色——文本不起作用

【英文标题】：Vue 3 - Vuetify 3 : color--text not working

【发布时间】：2021-10-01 15:57:06

【问题描述】：

我今天第一次尝试用 Vue3 安装 Vuetify。几乎所有东西都运行正常：组件被正确导入，“text-center”等类也运行良好。

但我注意到像“dark”这样的道具和像“color--text”这样的类不是，我不知道为什么......

这是我的 plugins/vuetify.js 文件：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import  createVuetify  from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify(
  components,
  directives,
)

例如：

<h1 class="display-2 font-weight-bold mb-3">
    <div class="red--text">Welcome to the Vuetify 3 Alpha</div>
</h1>

文字不会变红，没有任何变化。

我不知道问题可能出在哪里...这是一个求救信号

谢谢！

【参考方案1】：

根据vuetify classes应该是text-red而不是red--text：

 <v-app>
    <div class="bg-purple-darken-2 text-center">
      <span class="text-red">Lorem ipsum</span>
    </div>
  </v-app>