Gatsby JS：根据当前时间动态分配样式/类？

Question

我正在尝试使用 gatsby JS 为 div 动态分配背景颜色。 一切在开发中运行良好，但在运行构建后，页面为 static 并且不再动态更改 styles（与类相同）。 请快速浏览一下：

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

构建时，文本会正确呈现当前时间，但是 div 的样式保持 static 到基于构建时刻的时间分配的任何样式 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>
)

Answer 2

根据文档，它应该与样式组件一起使用（ https://www.gatsbyjs.org/docs/css-in-js/ ）。

此外，您可以尝试在 gatsby-browser 配置中发挥作用。 （ https://www.gatsbyjs.org/docs/api-files-gatsby-browser/ ）