Условный импорт файла темы. css с использованием React Hooks

Question

У меня есть два файла темы: светлая css и темная css. Я хочу переключаться между двумя темами с помощью UseState React Hook (или другого метода в реагирующих функциональных компонентах).

Например, у меня есть это в моем функциональном компоненте Navbar:

import "./light.css"

Поэтому я хочу, чтобы механизм импортировал (или, скорее, переключал) два файла, используя ловушки, основанные на действиях пользователя нажатием переключателя или кнопки на панели навигации, которая будет вызывать setTheme и помещать ее в блок useEffect.

Имеет ли это смысл? Если да, как мне это сделать? Все учебники, которые я могу найти, основаны на жестком коде css, в то время как в моей ситуации я должен использовать два файла, упомянутых выше. спасибо

Answer 1

Решено!

Я в основном использовал то, что предлагал в своем вопросе, но с дополнительным поворотом:

Я использовал эти хуки: useState, useEffect и useContext

• useState: чтобы переключить значения между темным и светлым.
• useContext: записать в localalstorage тему: item (для постоянства)
• useEffect: каждый раз проверять значение из локального хранилища. изменено значение темы + refre sh в браузере.

Не уверен, что это самое лучшее решение, но оно работает и сохраняет пользовательские настройки, что для меня является плюсом.