Unable to override styles in vuetify

vuetify override styling
vuetify override theme colors
override vuetify sass variables
vuetify css
list of vuetify variables
vuetify custom css
vue override component css
vuetify saas

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?

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`

[Bug Report] Unable to utilize SASS variables, did some experiments. Attempts to try to use Single File components with styles with the instructions to override vuetify SASS variables fails. Environment Vuetify Version: 2.2.0 Last working version: 2.1.18 Vue Version: 2.6.10 Browsers: Chrome 79.0.3945.79 OS: Mac OS 10.14.6 Steps to reproduce When creating a vuetify theme, provide a colour object (with darken, base and lighten

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.

vuetifyjs/vuetify, Versions and Environment Vuetify: 1.0.0-alpha.1 Vue: 2.5.9 Browsers: confused -- https://vuetifyjs.com/en/style/theme still describes overriding stylus I'​ve only been able to override $body-font-family -- no other variables that I've tried work. Inspect component/html tag, see the class name, add it to the bottom of your .vue page in style tag, preferably style scoped. Override the styles with !important if necessary.

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

What is the recommended way to override a Vuetify component's , Inspect component/html tag, see the class name, add it to the bottom of your .vue page in style tag, preferably style scoped. Override the styles with !important if  Vuetify style overriding for RTL support. Contribute to meyt/vuetify-rtl-style development by creating an account on GitHub.

How to override scoped styles in Vue components? - css - html, Now what are my options for overriding the scoped rule? </style> Some pre-​processors, such as Sass, may not be able to parse >>> properly. i wanted use vuetify in my app only on a page , and that crashed my css, then I use <style  Versions and Environment Vuetify: 2.0.0-beta.7 Vue: 2.6.10 Browsers: Chrome 75.0.3770.100 OS: Mac OS 10.14.5 Steps to reproduce npm run serve Expected Behavior Application working without errors Actual Behavior Running development mode s

Icons, This will overwrite the defaults of components that have default icon values. src​/plugins/vuetify.js import '@mdi/font/css/materialdesignicons.css' // Ensure you  Problem to solve The ability to adjust VTabsSlider height/thickness Proposed solution Add prop to VTabsSlider that would override tabs-slider-height.

Overlay component, (for example success or purple ) or css color ( #033 or rgba(255, 0, 0, 0.5) ). Using the v-hover, we are able to add a nice scrim over the information card with​  Vuetify Material Design Component Framework. We strive to bring MD spec components to vue.js developers so you can do more with your application, faster. Vuetify makes prototyping apps fast and beautiful and is highly customizable with a fully featured set of single file components.

Comments
  • Might be related, make sure to read all comments as well: stackoverflow.com/q/53191552/1981247
  • There are no preset styles in my app file.
  • 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?