反应-步骤-进度条样式定制

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

我已尝试以以下方式重写。我导入了自己的scss文件，其中包含我想要在tsx文件中使用的所需样式。然后，我在progressbar标签中引用了我各自的类，如下所示:

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

要控制每个步骤使用的类，您需要使用stepClassprop而不是classNameprop:

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