Is is possible to conditionally load a certain css file in React

Question

So I have a front end app currently running in React v17.0.2, and I need to load a css file conditionally. I have a html switch to switch between dark mode and light mode and currently I have this code, it works perfectly on localhost:

function App() {
    const { Content } = Layout;

    const rootStore = useContext(RootStoreContext);
    const { token, appLoading, setAppLoading, lightMode } = rootStore.commonStore;
    const { getUser } = rootStore.userStore;
    
    if (lightMode) { 
        require('antd/dist/antd.css');
    }
    else {
        require('antd/dist/antd.dark.css');
    }

like I said that code works perfectly on localhost but the moment I deploy this to azure and click on the switch to change the theme, I get the following error:

VM648:3 Uncaught TypeError: Cannot read properties of undefined (reading 'cosmeticStyleSheet')
    at <anonymous>:3:39
    at <anonymous>:26:11

So I am assuming the way I am doing it is wrong, what is the correct way to do it?

Your guidance is appreciated!

not exactly sure this is what you need, but the antd documentation talks about how to do this using ConfigProvider and some css vars — 4UmNinja
– 4UmNinja, Commented Oct 6, 2021 at 4:50
Unfortunately that is still in experimental and would not be accepted in my environment — Hancs
– Hancs, Commented Oct 7, 2021 at 20:20

Hancs · Accepted Answer · 2021-10-07 20:24:15Z

0

Turns our rewording the google search brought up a similar question

Answer here: conditional css in create-react-app

answered Oct 7, 2021 at 20:24

Hancs

3431 gold badge6 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Is is possible to conditionally load a certain css file in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related