React Bootstrap 进度条计算颜色答案

【问题标题】：React Bootstrap Progress Bar Computed ColorReact Bootstrap 进度条计算颜色
【发布时间】：2020-08-04 19:52:25
【问题描述】：

我将如何动态设置 React Bootstrap 进度条背景颜色？

我尝试编辑内部生成的“进度条”类没有成功。以下代码将正确设置高度为 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);

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

【问题讨论】：

标签： reactjs progress-bar react-bootstrap

【解决方案1】：

.progress-bar 是一个类。你需要使用类选择器.

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

作为旁注，您还可以使用react-bootstrap progress bar 的variant 属性。例子：

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

react-bootstrap 很容易为您提供进度条的主题

【讨论】：