Add color to vuetify component

11,872

Try to add a standard style like style="background:#26c6da;color:white" to any element you want :

new Vue({
  el: '#app',

})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(item,i) in 5" :key="i" style="background:#26c6da;color:white">
        <div slot="header">Item</div>
        <v-card>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>
Share:
11,872

Related videos on Youtube

user1592380
Author by

user1592380

Updated on June 04, 2022

Comments

  • user1592380
    user1592380 almost 2 years

    I'm working with vuetify expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I'm bot sure how to add color to this. As you can see I've been trying to add color="#26c6da" to multiple components without success.

    <template>
      <!-- <v-layout align-start > -->
    
      <!-- <v-layout align-start justify-center row fill-height> -->
      <v-container row fill-height justify-center style="max-width: 1200px" class="mx-auto" color="#26c6da">
        <!-- <v-layout row fill-height=""> -->
                <!-- <v-layout row justify-space-around> -->
    
          <v-flex  class="mx-auto" color="#26c6da">
            <v-expansion-panel style="max-width: 1200px" class="mx-auto" color="#26c6da" >
              <v-expansion-panel-content v-for="(item,i) in items" :key="i">
                <div slot="header" class="headline font-weight-bold">{{item.header}}</div>
                <v-card >
                  <v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
                </v-card>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-flex>
        <!-- </v-layout> -->
      </v-container>
    

    Here is a component codepen link:

    https://codepen.io/anon/pen/OdJKqm?&editable=true&editors=101
    

    How can I get this working?

    • ljubadr
      ljubadr about 5 years
      style="color: ..." or style="background-color: ...". The prop color="..." expects one of these values
    • Traxo
      Traxo about 5 years
      Some components such as v-flex don't have color prop. So you must either set custom color in theme and use the relevant class, or style it manually.
    • Michael Iyke
      Michael Iyke about 3 years
      @Traxo I wish you had put a link on setting custom color. But thanks for your answer nonetheless, was helpful
  • user1592380
    user1592380 about 5 years
    Thank you, Any idea how to turn the text white instead of black?
  • Boussadjra Brahim
    Boussadjra Brahim about 5 years
    you're welcome, see my updated answer about changing the text color