Override vuetify without !important

Question

I want to apply custom CSS and override some default Vuetify colors. For example, success button can be easily overridden:

.success-button {
  background-color: $sb--color-success !important;
}

But is there a way to do the same without using !important? I tried both:

body .success-button {
    background-color: $sb--color-success;
}

button .success-button {
  background-color: $sb--color-success;
}

How to do it without !important?

Vuetify uses colors with `!important` by default, you need `!important` to override other important rules — Ferrybig, Feb 05 '19 at 09:59
Your question is too broad. What are you trying to do? Replace the default color (theme)? Or you can use different values in `.styl`... Or learn more about specificity if specificity is the issue https://stackoverflow.com/a/51728504/1981247 These questions have likely been answered (or is explained in the docs), but impossible to know what do you want. — Traxo, Feb 05 '19 at 14:44

score 1 · Accepted Answer · answered Feb 05 '19 at 10:01

1

You can try something along this lines

// src/index.js

// Libraries
import Vue from 'vue'
import Vuetify from 'vuetify'

    // Helpers
    import colors from 'vuetify/es5/util/colors'

    Vue.use(Vuetify, {
      theme: {
        primary: colors.red.darken1, // #E53935
        secondary: colors.red.lighten4, // #FFCDD2
        accent: colors.indigo.base // #3F51B5
      }
    })

Or something like this

 <h1 class="subheading grey--text">DASHBOARD</h1>

answered Feb 05 '19 at 10:01

Svinjica

2,389
2
37
66

is 'index.js' the same as 'main.js'? As long as I don't have index.js file at all. – Desiigner Feb 05 '19 at 10:04
Could be. Where did u import vuetify? – Svinjica Feb 05 '19 at 10:10
inside this main.js. Thank you, I'll try your solution – Desiigner Feb 05 '19 at 10:11
@Desiigner If solution helped you you should accept provided answer :) – Svinjica Feb 05 '19 at 12:32

Override vuetify without !important

1 Answers1