Unable to override styles in vuetify

Question

how can I overwrite actual classes in vuetify?

I have created a ./src/stylus/main.styl file where I override some of the current vuetify settings as a test:

Answer 1

Some variables need to be set BEFORE importing _variables.styl because they are used to set other variables in that file. This works because Vuetify is using conditional assignment (:=) in the stylus files.

The safest way is to set all top-level variables before importing any other files.

// set these variables before Vuetify does
$body-font-family = Arial
$alert-font-size = 18px

Then, import _variables.styl so that you can override the nested values:

@import '~vuetify/src/stylus/settings/_variables'

// now that the $material-dark hash exists, set the background
$material-dark.background = 'green'

Then, import the main.styl so that the Vuetify CSS classes are created:

// import main to set all styles
@import '~vuetify/src/stylus/main'

// override the CSS classes using stylus variables
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

Vuetify is using conditional assignment operators in the stylus files. So if you set the variable before the @import, it will persist after the @import. This is important because _variables.styl references those variables internally.

Specifically in this case, $heading-font-family := $body-font-family. Then the $headings hash is set using the value of $heading-font-family. This means that by the time you were setting $body-font-family, $heading-font-family was already set to the default value.

The override of .display-2 styles wasn't working because it didn't exist yet. So when you imported main.styl, it was getting set back to the default values.

You can clean it up a little by breaking it into several files:

src/assets/stylus/variables.styl

// set all top-level variables
$body-font-family = Arial
$alert-font-size = 18px

src/assets/stylus/theme.styl

// set all nested variables
$material-dark.background = 'green'

src/assets/stylus/app.styl

// override CSS styles
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

src/assets/stylus/main.styl

// pull it all together
@import 'variables'
@import '~vuetify/src/stylus/settings/_variables'
@import 'theme'
@import '~vuetify/src/stylus/main'
@import 'app`

Answer 2

In Vuetify 2, for example, if you want ro override background colour (nuxt js):

1. Create .\assets\style\variables.scss

    @import '~vuetify/src/styles/styles.sass';

    $material-light: map-merge($material-light, (
            background: map-get($blue, 'lighten-5'),
            calendar: (background-color: red),
    )
    );

2. In nuxt.config.js add:

    buildModules: ['@nuxtjs/vuetify'],
    vuetify: {
        treeShake: true,
        customVariables: ['~/assets/style/variables.scss']
    }

More info: https://vuetifyjs.com/ru/customization/sass-variables

Answer 3

I have the same issue as you, and the way to solve this is by removing the scoped attribute from the <style> tag.

Hope that helps.