react-bootstrap 进度条 - 你能改变标签颜色吗？答案

【问题标题】：react-bootstrap progress bar - can you change the label color?react-bootstrap 进度条 - 你能改变标签颜色吗？
【发布时间】：2023-03-28 21:32:02
【问题描述】：

我目前正在使用 React-bootstrap 制作 progress bar。很简单，它可以工作：

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

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

【问题讨论】：

根据文档，label 属性接受 node，因此您可以尝试将文本包装在与 color: white 跨度的跨度和样式中。

标签： reactjs progress-bar react-bootstrap

【解决方案1】：

CSS 中颜色的简单解决方案。如果您检查元素，则颜色在

下定义

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

我碰巧这样做，但想有条件地设置颜色，我想出了一个结合 JavaScript 和 CSS 的解决方法

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

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

那么你的 CSS 类名将是

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

【讨论】：

【解决方案2】：

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

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

然后你可以像这样使用它：

<ProgressBar variant="custom" />

【讨论】：

【解决方案3】：

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

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

`
// 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} />

【讨论】：