Así que tengo una variable en localStorage que se cambia al usar un botón de alternancia. Cuando hago clic en el botón de alternar, cambia correctamente el color. Sin embargo, al refrescar la página no respeta el color en el almacenamiento local.
Incluso estoy registrando la variable y es la variable correcta, simplemente no la está respetando en CSS por alguna razón. Aquí está el código:
export const Home: React.VFC<any> = () => { const theme = useRecoilValue<any>(themeAtom); // gets theme value from the store, which is synced with a localstorage effect console.log('theme context from home: ', theme) // dark return ( <> <div className={`fixed top-0 left-0 h-full w-1/2 bg-${ theme === 'dark' ? 'black' : 'white' // renders as white } `} /> ...Lo extraño es que esta técnica funciona para diferentes contextos, como el contexto del usuario o el contexto de autenticación. Sin embargo, específicamente para CSS esto no funciona.
Debido a cómo funciona el motor TailwindCSS JIT, si usa bg-${/* ... */} , TailwindCSS no detectará esa clase y no la incluirá en su compilación final. Documentación
En su lugar, incluya bg en su ternario para que Tailwind pueda detectar la clase y agregarla.
<div className={`fixed top-0 left-0 h-full w-1/2 ${ theme === 'dark' ? 'bg-black' : 'bg-white' } `} />Estoy enfrentando el mismo problema. Piense que el almacenamiento local no está disponible en el lado del servidor y, por lo tanto, no representa el HTML correctamente, lo que es frustrante es que en el lado del cliente, las variables se resolvieron correctamente pero de alguna manera no actualizan/hidratan el html.