javascript - Gatsby JS : Dynamically assign Style/Class based on current time?

Question

我正在尝试使用 gatsby JS 为 div 动态分配背景颜色。在开发中一切正常，但在运行构建后，页面是静态的并且不再动态更改样式(与类相同)。请快速浏览一下:

let currentTime = new Date().toTimeString()
return (
    <React.Fragment>
      <div
        style={{
          background: parseInt(currentTime[7]) % 2 == 0 ? "green" : "yellow",
        }}
      >
        {currentTime}
      </div>
    </React.Fragment>
)

构建时，文本会正确呈现当前时间，但是 div 的样式会保持静态，以根据构建时的时间分配给 gatsby 的任何样式。

此用例将有一个红绿灯系统来显示商店当前是否营业(通过比较营业时间与当前时间)

我非常感谢任何帮助。 :)

Answer 1

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