CODEWITHSUNDEEP
cssreactjssass
DSR
DSR

Reputation: 31

react-step-progress bar styling customization

I am creating a progress bar using the react-step-progress[enter link description here][1] library provided in react. It already takes it own styling reference from react-step-progress/dist/index.css. But, I want to override the colors provided by them. I tried to override by creating my own sass file and giving reference to those classes but they dont seem to override the existing styles.

Can someone please help me override those styles?

I had taken reference from the following link. https://www.npmjs.com/package/react-step-progress?activeTab=readme

I have tried to override in the following way. I imported my own scss file with the required styles I want in my tsx file. Then I referred my respective classes in the progressbar tag like this.

iconStyles.module.scss

.ProgressBar {
.stepColor {
    color:#ffffff;
    background-color: #26890D;
  } 
}

And I have imported this class into my tsx file in the following way :

Progressbar.tsx

import styles from './iconStyles.module.scss';
import * as React from 'react';
import StepProgressBar from 'react-step-progress';

const step2Content = <h1>Step1</h1>;
const step3Content = <h1> Step 2</h1>;
const step4Content = <h1> Step3 </h1>;

export default function ProgressBar() {
  // setup step validators, will be called before proceeding to the next step

  function step2Validator() {
    // return a boolean
  }

  function step3Validator() {
    // return a boolean
  }

  // render the progress bar
  return (
    <div>
      <StepProgressBar
       className={styles.stepColor}
        startingStep={0}
        steps={[
          {
            label: 'Step1',
            name: 'Step1',
            content: step1Content
          },
          {
            label: 'Step2',
            name: 'Step2',
            content: step2Content,
            validator: step2Validator
          },
          {
            label: 'Step3',
            name: 'Step3',
            content: step3Content,
            validator: step3Validator
          }
        ]} onSubmit={undefined} />
    </div>
  );
}

Upvotes: 0

Views: 2252

Answers (1)

Henrik Erstad
Henrik Erstad

Reputation: 691

To control the class used for each step you need to use the stepClass prop rather than the className prop:

  [...]
  return (
    <div>
      <StepProgressBar
        stepClass={styles.stepColor}
        startingStep={0}
        steps={ [...] }
        onSubmit={undefined} />
    </div>
  );

Upvotes: 1

Related Questions