根据类设置许多CSS样式

根据类设置许多CSS样式,css,reactjs,twitter-bootstrap,bootstrap-4,react-bootstrap,Css,Reactjs,Twitter Bootstrap,Bootstrap 4,React Bootstrap,我有一个应用程序,显示与特定团队相关的体育人员的信息。这是一款React应用程序,前端样式使用React引导4 我希望能够根据球员的球队颜色、伪代码设计一些页面元素: .team1 { primary-color: #773141; secondary-color: #ffb612; } .team2 { primary-color: #145131; secondary-color: #gbb894; } 然后将这些原色和副色应用于H1s、边框等 我可以通过在浏览器

我有一个应用程序,显示与特定团队相关的体育人员的信息。这是一款React应用程序,前端样式使用React引导4

我希望能够根据球员的球队颜色、伪代码设计一些页面元素:

.team1 {
  primary-color: #773141;
  secondary-color: #ffb612;
}

.team2 {
  primary-color: #145131;
  secondary-color: #gbb894;
    }
然后将这些原色和副色应用于H1s、边框等

我可以通过在浏览器中破解CSS来模拟我想要的效果,并希望应用以下样式(但可能会将十六进制值替换为该团队的主色或副色?)

React应用程序以标准方式安装在index.html中:

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

您需要启用JavaScript才能运行此应用程序。

实现这一目标的最佳方式是什么?对不起,我真的不是一个有经验的前端开发人员

我希望您使用的是原色和副色的var符号。@m4n0我不是,这是伪代码。我对CSS中的var符号一无所知。这就是我应该做的吗?那可以提高你的努力。对
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>