更改反应引导程序 ProgressBar 的内部颜色答案

【问题标题】：Changing the inner colour of the react bootstrap ProgressBar更改反应引导程序 ProgressBar 的内部颜色
【发布时间】：2021-03-19 20:07:31
【问题描述】：

目前，我通过以下方式在我的代码中使用 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 文件中更改它，以便我以后可以使用用于更改条形颜色的变量。

【问题讨论】：

标签： javascript reactjs progress-bar react-bootstrap

【解决方案1】：

如果您对 bar 组件有 ref，您可以按类找到它的子组件，然后更改其颜色。

  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 */ />

【讨论】：