Change global css in react-router based on routes?

Question

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).

Nivolas · Accepted Answer · 2019-01-03 17:59:50Z

1

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

answered Jan 3, 2019 at 17:59

Nivolas

932 gold badges2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change global css in react-router based on routes?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related