У меня странная проблема со статическим файлом после запуска gatsby build
.
Атрибуты DOM (например, className
) не могут быть обновлены при прослушивании изменения реквизита, но не в случае DOMсодержимое, например текст или дочерние элементы DOM.
- происходит только после gatsby-build, то есть в SSR
// версия 1, не работает
const ThemeProvider = ({ isLight, children }) => {
return (
<div className={isLight ? 'light-theme' : 'dark-theme'}> // <- does not change when `isLight` updating
<h1>{isLight ? 'light-theme' : 'dark-theme'}</h1> // <- changes when `isLight` updating
{children}
</div>
)
}
// Verison 2, не работает
// still having the same issue
const ThemeProvider = ({ isLight, children }) => {
if (isLight)
return (
<div className="light-theme">
<h1>{isLight ? 'light-theme' : 'dark-theme'}</h1>
{children}
</div>
)
return (
<div className="dark-theme">
<h1>{isLight ? 'light-theme' : 'dark-theme'}</h1>
{children}
</div>
)
}
// Verison 3, работает
const ThemeProvider = ({ isLight, children }) => {
if (isLight)
return (
<div className="light-theme">
<h1>{isLight ? 'light-theme' : 'dark-theme'}</h1>
{children}
</div>
)
return (
<section className="dark-theme"> // <-- change to the different DOM, everything works fine
<h1>{isLight ? 'light-theme' : 'dark-theme'}</h1>
{children}
</section>
)
}