Vuetify stepper change color and thickness of lines between steps

Question

I have created a stepper using Vuetify stepper. I am wondering how can I change the thickness and color of the lines connecting the steps?

As you can see in my example I am already changing the vertical alignment of lines with the divider-div.

Thanks.

I changed the divider-div properties but it did not work.

<script setup>


import { ref } from 'vue'
  import Dialogue from './Dialogue.vue'

  const currentStep = ref(1)

  const steps = [
    { id: 1, title: 'Step 1', subtitle: 'Description of step 1' },
    { id: 2, title: 'Step 2', subtitle: 'Description of step 2' },
    { id: 3, title: 'Step 3', subtitle: 'Description of step 3' },
    { id: 3, title: 'Step 3', subtitle: 'Description of step 4' },
  ]
</script>

<style scoped>
  .v-stepper :deep(.v-stepper-item__avatar) {
    width: 0px !important;
    height: 0px !important;
    border-radius: 10px;
    font-size: 1rem !important;
    background-color: gray;
  }

  .stepper-item-wrapper {
    background-color: white;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    height: 85px;
    width: 120px;
    border-radius: 5px;
  }

  .divider-div {
    margin-bottom: 40px;
  }

  .icon-container {
    /* background-color: red;*/
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid black;
    border-bottom-left-radius: 5px; /* Radius for bottom-left corner */
    border-bottom-right-radius: 5px; /* Radius for bottom-right corner */
  }

  .text-container {
    /*background-color: tan;*/
    height: 60%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<template>
  <v-stepper
    v-model="currentStep"
    alt-labels
    elevation="0"
    :border="false"
    density="compact"
    style="background-color: teal; margin: 10px"
  >
    <v-stepper-header>
      <template v-for="(step, index) in steps" :key="step.id">
        <div class="stepper-item-wrapper">
          <!-- <v-stepper-item
            :value="index + 1"
            :color="index + 1 === currentStep ? 'secondary' : 'grey'"
          > 
             <template v-slot:title> {{ step.title }} </template> 
            <template v-slot:subtitle v-if="step.subtitle">
              {{ step.subtitle }}
            </template>
            <template v-slot:icon> abcd </template>
          </v-stepper-item> -->
          <div class="text-container">
            <p v-if="index == 0" @click="console.log('hello')">
              Claim data reader
            </p>
            <p v-if="index == 1">Data cleaning</p>
            <p v-if="index == 2">Model training</p>
            <p v-if="index == 3">Model validation</p>
          </div>
          <div class="icon-container">
            <v-icon
              v-if="index < 2"
              icon="mdi-check-circle"
              color="green darken-2"
            ></v-icon>
            <v-icon
              v-if="index == 2"
              icon="mdi-close-circle"
              color="red"
            ></v-icon>
            <v-icon
              v-if="index == 3"
              icon="mdi-clock-outline"
              color="grey"
            ></v-icon>
          </div>
        </div>
        <div class="divider-div">
          <v-divider
            v-if="index !== steps.length - 1"
            :key="'divider-' + step.id"
          />
        </div>
      </template>
    </v-stepper-header>
  </v-stepper>
</template>

Answer 1

You can add the color and thickness props to the <v-divider> element that is part of your v-for loop.

<v-divider
  v-if="index !== steps.length - 1"
  :key="'divider-' + step.id"
  color="red"
  thickness="5"
/>

Try to always check the docs for props you can use instead of modifying the CSS. This will make your code less susceptible to break with future changes.