Vue 3-Vue 3:颜色--文本不工作

Question

我今天第一次尝试用Vue3安装Vuetify。几乎所有东西都正常工作:组件被正确导入，像“文本中心”这样的类也运行良好。

但是我注意到像“黑暗”这样的道具和像“颜色--文字”这样的类不是，我也不知道为什么.

以下是我的插件/vuatefy.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>

文本不会是红色的，没有什么变化.

我不知道问题出在哪里.这是S.O.S .

谢谢!

Answer 1

根据情趣课的说法，它应该是text-red而不是red--text：

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