Modify css of text field or select in vuetify components

Question

I am trying to modify the css of the vuetify components for example change the font-size to 10px, but it does not take my class into account Is there a solution for this ?

Answer 1

I'm gonna assume you are using one of the pre-processors out there (SASS or Stylus). So the thing is that you probably have the style section scoped for example <style lang="scss" scoped>.

What you want to do, is to use the deep selector so the styles from your parent component will leak into the child component, in this case vuetify component.

That can be achieved in sass like so:

<template>
    <div class="button-wrapper">
         <v-btn color="success">Success</v-btn>
    </div>
<template>

And then in the style tag:

<style lang="scss" scoped>
    .button-wrapper /deep/ button{
        background: #00e389;
        color: #fff;
    }
</style>

• Note: I do not use Stylus but if I'm not mistaken the syntax for deep is >>> so in this case, it will be .button-wrapper >>> button. you can read more about it here in the vue-loader docs

Answer 2

You could add this to your component:

<!-- in your component -->
<template>
  <p class="change-font">Changing font</p>
</template>

<script>
  export default {
  };
</script>

<style lang="css" scoped>
  .change-font{
    font-size: 10px;
  }
</style>

If you are using stylus, scss, or something else, change lang="css" to lang="stylus" or lang="scss"

Hope this helps.

Answer 3

If you are using stylus, you can do it :

<style lang="stylus" scoped>
.wrapper >>> button
    font-size 10px
</style>