React Bootstrap Вычисленный цвет индикатора выполнения - PullRequest
Новая
       100

React Bootstrap Вычисленный цвет индикатора выполнения

0 голосов
/ 04 августа 2020

Как мне go динамически установить цвет фона индикатора выполнения React Bootstrap?

Мои попытки отредактировать внутренний сгенерированный класс 'progress-bar' были безуспешными. Следующий код правильно установит высоту 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);

Каждый индикатор выполнения в конечном итоге будет иметь вычисленное значение цвета, поэтому я не могу просто отредактировать таблицу стилей css что bootstrap использует.

1 Ответ

1 голос
/ 05 августа 2020

enter image description here

.progress-bar is a class. You need to use the class selector .

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

As a side note, you can also utilize the variant prop of the реакция- bootstrap индикатор выполнения . Примеры: 

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

react- bootstrap с готовностью предоставляет вам темы для индикаторов выполнения

...