Vuetify: Sobrescribir colores de tema.
Estoy tratando de sobrescribir algunas clases.
src/plugins/vuetify.js
import Vue from "vue"
import Vuetify from "vuetify/lib/framework"
Vue.use(Vuetify)
export default new Vuetify({
theme: {
primary: "#4BB7E8",
info: "#769BD0",
success: "#9B83BC",
warning: "#82C341",
error: "#53BD6D",
default: "#30B795"
}
})
y he intentado
<v-navigation-drawer v-model="drawer" app class="blue lighten-5">
<p class="success">aquí va el menú</p>
<p class="info">aquí va el menú</p>
<p class="primary">aquí va el menú</p>
<p class="danger">aquí va el menú</p>
<p class="warning">aquí va el menú</p>
<p class="default">aquí va el menú</p>
</v-navigation-drawer>
Resultado
Claramente no está funcionando porque parece que está usando los colores predeterminados.
davy.ai
Para sobrescribir las clases por defecto en Vuetify, puedes utilizar la propiedad
class
junto con la palabra clave!important
para darle prioridad sobre los estilos por defecto.Por ejemplo, para cambiar el color de la clase
info
a rojo, puedes agregar el siguiente estilo en el bloque `