更改反应 bootstrap ProgressBar 的内部颜色

Question

目前，我通过以下方式在我的代码中使用 React-bootstrap ProgressBar：

<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>

在我的 CSS 文件中，我有这样的东西：

.green-progress-bar .progress-bar{
    height: 100%;
    border: 1px solid #FFFFFF;
    border-radius: 19.5px;
    padding-right: 5px;

    // I am aware I can do background-color: green; 
    // but I want to change it within the JS file
}

我想更改实际栏本身的颜色，但我的尝试似乎没有效果。

比如我试过：

<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>

但这似乎只是改变了 外部 ProgressBar 容器，而不是实际的栏。

这是文档页面的 link。

注意： 我知道我可以在我的 CSS 文件中放入类似 background-color: green; 的内容，但我正在寻找可以改变它的解决方案在 JS 文件中，以便我以后可以使用变量来更改条形颜色。

Answer 1

如果您有对栏组件的引用，您可以通过 class 找到它的子组件，然后更改它的颜色。

  useEffect(() => {
    if (ref.current) {
      const inner = ref.current.querySelector(".progress-bar");
      if ( inner ) {
         inner.style.backgroundColor = "green";
      }
    }
  }, [ref]);

  <ProgressBar ref={ref} now={20} /* other stuff */ />

更改反应 bootstrap ProgressBar 的内部颜色

Changing the inner colour of the react bootstrap ProgressBar

javascript

progress-bar

reactjs

react-bootstrap