0

I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:

import './Stylesheet1.css';

What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.

I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.

Daniel
  • 536
  • 3
  • 10
  • 1
    cant you just use an id for the body that controls the themes for each setting? like `body#theme1` and `body#theme2`? that would be a lot easier, otherwise you'll have to probably do some repetive code – Sergio Alen Oct 18 '18 at 00:26
  • I don't know why I didn't find this when I searched before, but I just found this thread that I think answers my question fine: https://stackoverflow.com/questions/28386125/dynamically-load-a-stylesheet-with-react I'm going to try it and if it works I'll close the question. – Daniel Oct 18 '18 at 00:54
  • Yeah, that solved my problem exactly. – Daniel Oct 18 '18 at 01:53
  • 1
    Possible duplicate of [Dynamically load a stylesheet with React](https://stackoverflow.com/questions/28386125/dynamically-load-a-stylesheet-with-react) – Jee Mok Oct 18 '18 at 02:08
  • 1
    @JeeMok - yes, definitely. That one didn't come up in my initial search or in the suggested answers for some reason. – Daniel Oct 18 '18 at 03:38

1 Answers1

1

Well another way you can do this is as follow:

import style1 from './Stylesheet1.css'; import style2 from './Stylesheet1.css';

Guillermo Quiros
  • 401
  • 3
  • 14