Reactjs 反应引导进度条计算颜色

如何动态设置React引导进度条的背景色

我试图编辑内部生成的“进度条”类失败。以下代码将正确地将高度设置为250，但背景颜色仍为默认的蓝色

import React from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';
import { withStyles } from '@material-ui/styles';

const styles = {
    progressBar: {
        height: 250,
        '& progress-bar': {
            backgroundColor: 'black'
        },
    }
}

const ProgressBarCustom = (props) => {     
    const classes = props.classes;
    return <ProgressBar className={classes.progressBar} now={props.sliderValue} label={props.valueLabel} />
}

export default withStyles(styles)(ProgressBarCustom);

从“React”导入React；
从“react bootstrap/ProgressBar”导入ProgressBar；
从'@material ui/styles'导入{withStyles}；
常量样式={
进度条：{
身高：250，
“&进度条”：{
背景颜色：“黑色”
},
}
}
const ProgressBarCustom=（道具）=>{
常量类=道具类；
返回
}
导出默认样式（样式）（ProgressBarCustom）；

每个进度条最终都会有一个计算出的颜色值，因此我不能简单地编辑bootstrap正在使用的css样式表。

。进度条

是一个类。您需要使用类选择器

const styles = {
  progressBar: {
      height: 250,
      '& .progress-bar': { /* add the period */
          backgroundColor: 'black'
      },
  }
}

---

作为旁注，您还可以使用的

变体

道具。示例：

<ProgressBar variant="warning" now={60} />
<ProgressBar variant="danger" now={80} />

react bootstrap随时为您提供进度条的主题