如何将样式添加到所有无限滚动渲染项目中？

Question

我正在使用无限滚动，该样式仅适用于已经渲染的数组项目而不是新鲜渲染的数组项目...如何将其应用于将来的所有渲染阵列项目？我正在以数组的形式获取数据。我首先迭代数组项目，并在已经渲染的项目中添加了背景颜色和文本颜色，但是随着无限滚动的工作，它渲染了另一组数组元素，因此我如何在所有组件上应用此背景颜色和文本颜色？

const toggleModefunc = (props) => {
    if (Mymode === "light") {
        setMymode("dark")
        document.body.style.backgroundColor = "#042743";
          const elements = document.querySelectorAll(".card-body")
           elements.forEach(elems => {
             elems.style.backgroundColor = "#042743";
             elems.style.color = "#fff"
         });
    }

    else {
        setMymode("light")
        document.body.style.backgroundColor = "white";
         const elements2 = document.querySelectorAll(".card-body")
           elements2.forEach(elems => {
             elems.style.backgroundColor = "#fff";
             elems.style.color = "black"
         });
    }
}

//地图功能

{this.state.articles.map((element) => {
            return (
              <div className="col-md-4" key={element.url}>
                <Newsitem
                  title={element.title ? element.title : ""}
                  description={
                    element.description ? element.description : ""
                  }
                  imageurl={element.urlToImage}
                  newsUrl={element.url}
                  author={element.author}
                  date={element.publishedAt}
                  source={element.source.name}
                />
              </div>

Answer 1

从技术上讲，您可以在React中做类似的事情，

让我们假设NewsItem是.Card-Body，而iSdark可以代表您的状态。我将假设您的状态的默认设置为light主题。

状态将根据您的按钮单击更改，这将更改数组中项目的颜色。

{
  this.state.articles.map((element) => (
    <div className="col-md-4" key={element.url}>
      <Newsitem
        className={`card-body ${isDark ? : 'dark-class' : 'fff'`}} // maybe you can add a custom css class for dark theme
    
        title={element.title ? element.title : ""}
        description={element.description ? element.description : ""}
        imageurl={element.urlToImage}
        newsUrl={element.url}
        author={element.author}
        date={element.publishedAt}
        source={element.source.name}
      />
    </div>
  ));
}