what i need is change the default color of a button if a developer write a button like this

<v-btn>Aceptar</v-btn>

vue render a default button

i know i can do this

export default new Vuetify({
    theme: {
        themes: {
            light: {
                
              }
        }
    }
});

but i need vue render a simple button with a custom color like this

<v-btn>Ok</v-btn> ----(render)--->

i know can override css but i dont know where do this

.theme--light.v-btn.v-btn--has-bg {
    background-color: #4b53b9;
}

CodePudding user response：

As you can create Your own theme with your wanted colors, the easiest way is just to add a class with your wanted styles and apply them to the button:

new Vue({
  el: '#app',
  data() {
    return {}
  }
})

Vue.use(Vuetify);

/* needs to use !important to override the default theme styles */
.my-theme-btn-class {
  background-color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.css" rel="stylesheet" />

<v-app id="app" toolbar--fixed toolbar>

  <v-btn >Clear</v-btn>

</v-app>

Which will work fine.

CodePudding user response：

It's not necessary to create a CSS class if you just need to change one button's background color.

You can apply color prop directly to a button component. This way, by example:

<v-btn color="#4b53b9">
  Aceptar
</v-btn>

CodePudding user response：

So there could be two scenarios to achieve this requirement as per the use case.

1. You just want to change <v-btn> default color in one place. Then, I will suggest you to make this change inline by using color attribute.

   For Example :

   <v-btn color="#4b53b9">Button</v-btn> 
   

2. If you want to change <v-btn> at all the places in your application wherever you used this button. Then, I will suggest you to override the .v-btn color by make this style change at global .css file.

   For Example :

   .v-btn {
       background-color: #4b53b9 !important;
   }