1

I have an React application with design that heavily relies on hardcoded design elements in CSS code. Recently I was tasked to make some of them(images, color scheves, etc...) elements variable depending on the user login.

I'm looking for a simple solution that will allow for changing the entire design without styling each element separately with react.

Maybe there is a way to add an additional CSS stylesheet on the fly that will override the initial values? Or is there a way to modify the existing stylesheet so i can inject the modified values into it once during the user sign-in for example?

Thanks!

AnKing
  • 1,994
  • 6
  • 31
  • 54
  • You can add an additional stylesheet, which has the same class names as the ones you want to override, just ensure this is added after the current stylesheet imported by the project. CSS has a global scope, so classes that come after will overwrite the ones before them if they have the same name. – Vlatko Vlahek Mar 18 '19 at 14:37
  • @VlatkoVlahek I'm afraid this isn't going to work since I may end up having enormous amount of additional stylesheets that i need to include @ compilation – AnKing Mar 18 '19 at 14:40
  • Create a new stylesheet with all the properties that you want override and include it on the bottom to ensure that it will be the last css file readed. – Dupocas Mar 18 '19 at 18:17

2 Answers2

1

Best way will be to use CSS variables as mentioned here:

https://stackoverflow.com/a/17595596/2498528

Also for the IE support I used this:

https://github.com/jhildenbiddle/css-vars-ponyfill

AnKing
  • 1,994
  • 6
  • 31
  • 54
0

Styled Components will allow you to use variables inside your css code.

Take a look at: Styled Components

MrLine
  • 638
  • 7
  • 25