Блог

Главная - Вопросы по программированию - Существует ли какой-либо способ условного импорта файлов .css в React.JS ?

Существует ли какой-либо способ условного импорта файлов .css в React.JS ?

#css #reactjs

#css #reactjs

Вопрос:

Я пытаюсь добавить темный режим в свой проект. Без React я бы просто нацелился на элемент DOM, который запускает переключение режима, и связал свой пользовательский файл dark.css вместо index.css, который является моим доминирующим CSS-файлом. Но здесь, в React, для моего CSS потребуется последний файл, который я импортирую. Я новичок в React. Поэтому, пожалуйста, простите меня, если это не имеет особого смысла. Заранее спасибо! Вот мой код

 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')
);

Ответ №1:

Да, есть способ. Вы можете использовать React.Lazy и React.Suspense .

Например, в этой статье объясняется, как их использовать.

Комментарии:

1. Вот , может быть, более простой способ.

2. Medium просит меня обновить, чтобы прочитать статью, мы не должны ссылаться на нее

Ответ №2:

Нет ничего плохого в том, чтобы импортировать dark.css каждый раз, но его стили должны применяться условно. Я имею в виду, что все стили для темного режима должны быть обернуты в класс CSS, например .dark-mode . Затем, когда пользователь включает темный режим, вы должны применить этот класс к body тегу или к компоненту React верхнего уровня и удалить его, когда темный режим выключен.

Это будет гораздо более простым решением, чем пытаться работать с отложенной загрузкой.