Is there any method of importing .css files conditionally in React.JS?

Question

I'm trying to add a dark-mode in my project. Without React, I would have just targetted the DOM element which triggers the switching of the mode and linked my custom dark.css file instead of index.css which happens to be my pre-dominant CSS file. But here in React, it would take the latest file I'm importing for my CSS. I'm a beginner in React. So please pardon me if this doesn't make much sense. Thanks in advance! Here's my code

import ReactDOM from 'react-dom';
import './index.css';
{/*import './dark.css*/}

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

elehtine · Accepted Answer · 2020-12-11 10:12:25Z

2

Yes there is a way. You can use React.Lazy and React.Suspense.

For example this article explains how use them.

answered Dec 11, 2020 at 10:12

elehtine

1086 bronze badges

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

2 Comments

elehtine Over a year ago

Here is maybe easier way.

Anthony Over a year ago

Medium is asking me to upgrade to read the article, we shouldn't link there

Mike Szyndel · Accepted Answer · 2020-12-11 11:22:51Z

0

There's nothing wrong with importing dark.css every time, but its styles should be applied conditionally. What I mean is, all the styles for dark mode should be wrapped in a CSS class like .dark-mode. Then, when user turns dark mode on, you would apply this class to body tag or to the top-level React component, and remove it when dark mode is turned off.

This will be a much easier solution that trying to work with lazy loading.

answered Dec 11, 2020 at 11:22

Mike Szyndel

10.6k11 gold badges51 silver badges64 bronze badges

Comments

Dylan · Accepted Answer · 2023-01-08 16:54:38Z

0

For anyone viewing this, I would strongly recommend using useContext. It makes it very easy to pass your theme without using props to all of your children. They even have an example of implementing dark/light theme like you want: https://beta.reactjs.org/reference/react/useContext#usage

edited Jan 8, 2023 at 16:54

answered Jan 8, 2023 at 16:51

Dylan

434 bronze badges

1 Comment

node_modules Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Is there any method of importing .css files conditionally in React.JS?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related