Próbuję dynamicznie przypisać kolor tła do elementu div za pomocą Gatsby JS. W programowaniu wszystko działa dobrze, ale po uruchomieniu kompilacji strona jest statyczna i nie zmienia już dynamicznie stylów (tak samo z klasami). Proszę rzucić okiem na to:
let currentTime = new Date().toTimeString()
return (
<React.Fragment>
<div
style={{
background: parseInt(currentTime[7]) % 2 == 0 ? "green" : "yellow",
}}
>
{currentTime}
</div>
</React.Fragment>
)
Po zbudowaniu tekst poprawnie renderuje bieżący czas, jednak styl div pozostaje statyczny, niezależnie od stylu przypisanego przez Gatsby na podstawie czasu w momencie tworzenia.
Przykładem zastosowania w tym przypadku będzie system sygnalizacji świetlnej, który będzie wyświetlał, jeśli sklep jest obecnie otwarty (porównując godziny otwarcia z aktualnym czasem)
Jestem bardzo wdzięczny za wszelką pomoc. :)
2 odpowiedzi
Import { newGlobalColor } from "styled-components"
const changeDivColor = newGlobalColor`
body {
color : ${props => (props.theme ? "yellow" : "green")};
}`
let currentTime = parseInt( new Date().toTimeString()[7])%2;
let return (
<React.Fragment>
<changeDivColor theme={{currentTime}} />
<div>{currentTime}</div>
</React.Fragment>
)
Zgodnie z dokumentacją powinien działać ze styled-components (https://www.gatsbyjs .org/docs/css-in-js/).
Dodatkowo możesz spróbować swoich sił w konfiguracji gatsby-browser. (https://www.gatsbyjs.org/docs/api-files- przeglądarka-gatsby/)