'how change vuetify component variable?

I want to change the background color of <v-progress> by using variable $progress-circular-underlay-stroke but the new value does not affect the output

<template>
 <v-progress-circular
        :rotate="360"
        :size="100"
        :width="15"
        value="20"
        color="primary"
      >
        20
      </v-progress-circular>
</template>
<style lang='scss'>
  @import '~vuetify/src/styles/styles.sass';
  @import '~vuetify/src/components/VProgressCircular/_variables.scss';
  $progress-circular-underlay-stroke = "#FF6859" 
</style>

my environment is Vuecli.

vue.jsvuetify.js


Solution 1:[1]

You can overwrite its style as given below:

.v-progress-circular__underlay {
  stroke: #ff6859 !important;
}

Solution 2:[2]

If SASS variable change doesn't work for you like $progress-circular-underlay-stroke = "red"

Then you can do it via directive and it's more efficient if you're using two different color base progress circles. This will style only one instance and not override your plugin style all over the app

---- Todo.vue ----
<v-progress-circular
     :rotate="90"
     :size="186"
     :width="4"
     :value="'25%'"
     :color="red"
     :underlayColor="pink"
     v-drv-progress-circle
    >

--- ProgressCircle.directive.vue
export const drvProgressCircle = {
  bind: function(el, binding, vnode) {
    const unFillCircle = el.querySelector('.v-progress-circular__underlay')
    const { underlayColor } = vnode.data.attrs
    if (underlayColor) {
        unFillCircle.style.stroke = underlayColor
    }
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rikkas
Solution 2 Zuhair Naqi

Related Questions