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

Issue

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!

Solution

Turns our rewording the google search brought up a similar question

Answer here: conditional css in create-react-app

Answered By - Hancs