react-bootstrap进度栏-您可以更改标签颜色吗？

Question

我目前正在使用React-bootstrap来制作一个progress bar。足够容易，它可以工作：

<ProgressBar className="progress" striped now={this.state.now} 
label={this.state.progress + "/" + this.state.total}/>

但是标签文本为白色。我引用了上面的链接并搜索了他们的简短文档，但是找不到该选项。 是否可以更改标签的颜色？

Answer 1

React Bootstrap组件允许自定义变体，在CSS中，您可以定义类似

{`
  .progress-custom {
    background-color: purple;
    color: white;
  }
`}

然后您可以像使用它一样

<ProgressBar variant="custom" />

You can read more about custom variants here.

Answer 2

以下内容对我有用。除了更改条形的颜色外，我还希望没有边框半径。

我在样式文件中设置了以下全局样式。

`
// this is for the bar container
background: #F8F8F8; 
border: 0px solid rgba(255, 255, 255, 1); 
border-radius: 0px; 
height: 16px;

.progress-bar {  // this is for the bar itself
  background-color: #4AA69F;
}
`

我并没有更改代码。是的，它确实有效。

const now = 25
const ProgressInstance = () => <ProgressBar now={now} />

Answer 3

一个简单的解决CSS颜色的方法。如果您检查元素，则颜色将在

下定义

.progress-bar{
    background-color: #123456;
}

我碰巧要这样做，但想有条件地设置颜色，我想出了一种解决方法，可以结合使用JavaScript和CSS

在HTML中：您可以分配一个varient属性，例如，我有：

<ProgressBar now={score} variant={"YOU_PICK_A_NAME"} />

然后您的CSS类名称将

.bg-YOU_PICK_A_NAME{
  background-color: #123445!important;
}