Tengo 2 archivos css: light.css y dark.css , también tengo un componente ThemeSwitch que representa el elemento select , este elemento tiene un controlador para manejar el cambio de valor (el valor es light u dark ). La pregunta es: ¿hay alguna forma de incluir uno de estos archivos css de acuerdo con el dark.css dark light light.css )
Puede usar las bibliotecas react-lazy o react-suspense para cambiar componentes o archivos CSS de forma condicional.
A continuación se muestra el ejemplo de la biblioteca react-lazy
import React, { useLayoutEffect, useState } from "react"; const Theme1 = React.lazy(() => import("./Theme1")); const Theme2 = React.lazy(() => import("./Theme2")); const THEME_1 = "1"; const THEME_2 = "2"; export const ThemeSelector = ({ children }) => { const [theme, setTheme] = useState(null); const changeTheme = () => { debugger; setTheme(theme === "1" ? "2" : "1"); }; useLayoutEffect(() => { setTimeout(() => { if (theme !== THEME_2) { setTheme(THEME_2); } else { setTheme(THEME_1); } }, 5000); }, []); return ( <> <React.Suspense fallback={<></>}> {theme === "1" && <Theme1 />} {theme === "2" && <Theme2 />} </React.Suspense> <button type="checkbox" value={theme} onClick={changeTheme}>Change Theme</button> {children} </> ); };