vuetify apply text variant to other component than alert - vuetify.js

Question

In vuetify, <v-alert /> component has a text variant.
I'd like to apply it to my v-expansion-panel component, how can I do that?
<v-alert type="warning" text>
My alert info
</v-alert>
<v-expansion-panels >
<v-expansion-panel>
<v-expansion-panel-header color="warning" text>
<v-icon>mdi-alert</v-icon>
My expansion panel info
</v-expansion-panel-header>
<v-expansion-panel-content color="warning" text>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>

Answer 1

You can use background and text variant for styling within your application through a class, e.g. <div class="red"> or <span class="red--text">
refrence: Vuetify classes
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-app>
<v-container>
<v-card elevation="1">
<v-expansion-panels >
<v-expansion-panel>
<v-expansion-panel-header class="orange lighten-5 orange--text" text>
<v-icon class="orange lighten-5 orange--text">mdi-alert</v-icon>
My expansion panel info
</v-expansion-panel-header>
<v-expansion-panel-content class="orange lighten-5 orange--text" text>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</v-container>
</v-app>
</div>
</div>