Change global css in react-router based on routes?

user_79891 0
Viewed 516

There's a global css class I want to override (.ant-content), but I want to do it per route, I've tried importing css files which override .ant-content per react-component that gets loaded up in various routes but they only end up loading their css even when not rendering (probably because the imports happen regardless if a component is loaded).

reactjs less css
1 Answers

Assuming you have a class like this somewhere which you want to override:

.ant-content{ color: red }

you could try using the specifity ordering rules of CSS to override this. So, for example if in one of your routes you have a component you want to overwrite which looks like this

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

Then in the CSS you import into that component you could use:

.override .ant-content{
  color: blue
}

This should override the original .ant-content class as it is more 'specific' than the original class declaration. You can read more about specifity here: https://www.w3schools.com/css/css_specificity.asp

user_71189600
Related