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
Tadeo Hepperle 20 listopad 2019, 14:14

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>
)
0
Parveen Chauhan 20 listopad 2019, 16:03
Chociaż może to odpowiedzieć na pytanie, dodaj wyjaśnienie, co robi kod i dlaczego rozwiązuje problem.
 – 
disinfor
20 listopad 2019, 16:25

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/)

0
Zlo Bae 22 listopad 2019, 14:16