vuetify js custom style

Question

How can I edit/change vuetify css styles without variables?Currenty, v-btn has its styles, and scoped doesn't help. I have to use !important for each single css property, that's annoying. Are there any other ways to use my own custom styles for any vuetify component?

new Vue({ el: '#app' })

.block{
  background: rgb(3, 237, 245) ;
  margin: 10px;
  height: 60px; 
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.267);
  border-radius: 15px;
  font-family: 'Cookie' ;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  width: 200px;
  
}
.wrapper{
  background-color: rgb(0, 126, 131);
}
.block:hover{
  box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.267);
  transform: none;
}
.block:active{
  box-shadow: inset 2px 2px 10px 5px rgba(0, 0, 0, 0.267);
  transform: none;

}

<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container class="wrapper">
        <div >
          <v-btn class="block " >
            V-Button
          </v-btn>
          <button  class="block  " >
            Button
          </button>
         </div>
          </v-container>
      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  
</body>
</html>

What do you mean by "scoped doesn't help" and why do you have to use !important? Scoped css [works fine](https://stackoverflow.com/a/50985784/1981247), and there are [ways to avoid using !important](https://stackoverflow.com/a/51728504/1981247) — Traxo, Sep 19 '18 at 10:39
I mean, even when I use my own styles scoped , nothing changes, vuetify default style still prevails. — Ren, Sep 19 '18 at 10:56
First linked answer explains how to use scoped styles in vuetify, then second linked answer explains more about CSS specificity which allows us to avoid using !important. Presumably, you want to change style for specific buttons/components, and not globally? If you want to apply styles for all components then change predefined stylus variables. There are many so better read docs then. (if not globally then try to grok linked answers, if you followed vuetify installation instructions from docs) — Traxo, Sep 19 '18 at 11:00

score 0 · Answer 1 · answered Sep 20 '18 at 02:33

0

Something was wrong with Vue Cli 3. I've done the same on Vue Cli 2, and "scoped" worked as expected.

answered Sep 20 '18 at 02:33

Ren

71
2
12

score 0 · Answer 2 · answered Dec 01 '20 at 21:38

I have successfully been able to override almost all vuetify component styles by creating a more specific selector chain in my css. I do this by adding my own class to the component, and then in css targeting that class with the default vuetify classes after.

For example, the <v-switch> component. In its "off" state (its v-model is false), by default the switch turns gray. I wanted it to change its color in this state, so I just added a class and changed it in the css.

html/template:

<v-switch
    v-model="myModel"
    color="primary"
    class="off-state-orange"
  ></v-switch>

css:

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__track {
  color: #f2a444;
}

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {
  color: #f2a444;
}

vuetify js custom style

2 Answers2