react-step-progress 栏样式自定义

Question

我正在使用 react 中提供的 react-step-progress[enter link description here][1] 库创建一个进度条。它已经从react-step-progress/dist/index.css 获取了自己的样式参考。但是，我想覆盖它们提供的颜色。我试图通过创建自己的 sass 文件并引用这些类来覆盖，但它们似乎没有覆盖现有样式。

有人可以帮我改写这些样式吗？

我参考了以下链接。 https://www.npmjs.com/package/react-step-progress?activeTab=readme

我尝试通过以下方式覆盖。 我在我的 tsx 文件中导入了我自己的 scss 文件，其中包含我想要的所需样式。 然后我像这样在进度条标签中引用了我各自的类。

iconStyles.module.scss

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

我已经通过以下方式将这个类导入到我的 tsx 文件中：

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>
  );
}

Answer 1

要控制用于每个步骤的类，您需要使用stepClass 属性而不是className 属性：

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