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

【问题标题】：Gatsby JS: Dynamically assign Style/Class based on current time?Gatsby JS：根据当前时间动态分配样式/类？
【发布时间】：2019-11-22 19:16:02
【问题描述】：

我正在尝试使用 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 根据构建时刻的时间分配的样式。

为此的用例将是有一个交通灯系统来显示商店当前是否营业（通过将营业时间与当前时间进行比较）

我非常感谢您的帮助。 :)

【问题讨论】：

标签： javascript css reactjs gatsby

【解决方案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>
)

【讨论】：

虽然这可能会回答问题，但请解释代码在做什么以及为什么它可以解决问题。

【解决方案2】：

根据文档，它应该与 styled-components (https://www.gatsbyjs.org/docs/css-in-js/) 一起使用。

此外，您可以尝试在 gatsby-browser 配置中施展魔法。 (https://www.gatsbyjs.org/docs/api-files-gatsby-browser/)

【讨论】：