基于路由更改react-router中的全局css？

Question

有一个我想要覆盖的全局css类( .ant-content )，但我想在每个路由上这样做，我已经尝试导入css文件来覆盖每个react-component的.ant-content，这些.ant-content在不同的路由中加载，但它们最终只在不渲染时加载它们的css (可能是因为无论组件是否加载都会发生导入)。

Answer 1

假设你在某个地方有一个这样的类，你想要覆盖它：

.ant-content{ color: red }

您可以尝试使用CSS的特定排序规则来覆盖它。例如，如果在您的某个路由中有一个要覆盖的组件，该组件如下所示

<div className='override'>
  <Component className='ant-content/>
</div> 

然后，在导入到该组件中的CSS中，您可以使用：

.override .ant-content{
  color: blue
}

这应该覆盖原始的.ant-content类，因为它比原始的类声明更“具体”。你可以在这里阅读更多关于细节的内容：https://www.w3schools.com/css/css_specificity.asp