Unable to override styles in vuetify

1
votes

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:

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





$material-dark.background = green
$body-font-family = Arial
$alert-font-size = 18px

.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important


@import '~vuetify/src/stylus/main'

For some reason the above values only work partially. The new values assigned to $material-dark.background and $body-font-family work fine for anything under the theme--dark however when it comes to .display-2 these values are still calling the original settings for both font-size and font-family and override the ones I added to main.styl. I even tried going inside the component which contains the .display-2 first in stylus as scoped language which did not work then in plain css which does not throw an error but gets ovewriten by Vuetify's original default generated in the app.xxx.css and chunk-vendor.xxx.css files.

//component
<style scoped>
h1.display-2{
  font-size:20px;
  font-family: "Times New Roman";
  color:green;
}

</style>

Is there a reason for this?

3
vue.jsvuetify.jsstylusvue-cli-3
Might be related, make sure to read all comments as well: stackoverflow.com/q/53191552/1981247 – Traxo
There are no preset styles in my app file. – HGB
I modified the code for main.styl to something like this: h1.display-2 font-size: 30px!important font-family: Times New Roman!important color:$indigo.base . But I find adding "!important!" to everything messy. Any cleaner ways to override the style values? – HGB

3 Answers

6
votes

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`
4
votes

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.

2
votes

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),
    )
    );
  1. 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