如何在 Gatsby 中的全局 CSS onclick 之间切换？

Question

我正在盖茨比建立一个作品集网站，随着我在插图和设计方面的工作越来越多，我希望根据用户通过点击进行的选择提供多种设计选项来展示该作品。我发现了一些类似的问题，但没有一个是专门针对 Gatsby 的。

我正在使用样式化组件来创建布局，所以在我看来，只需通过一个按钮在多个全局样式表（带有字体、颜色等）之间进行交换就可以了，因此布局保持不变，但老实说，我不知道该怎么做，因为我在 Gatsby 和 Javascript 方面都是初学者。

提前致谢！

Answer 1

给定一个简单的<Layout> 结构，例如：

import React from "react"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.theme === "purple" ? "purple" : "white")};
  }
`
export default function Layout({ children }) {
  return (
    <React.Fragment>
      <GlobalStyle theme="purple" />
      {children}
    </React.Fragment>
  )
}

您可以通过添加布尔运算符来切换<GlobalStyle>，轻松地将onClick 事件附加到children，例如：

export default function somePage(){
   const [defaultStyles, setDefaultStyles]=useState(false);

   const handleChange=()=>setDefaultStyles(!defaultStyles)
   
   return <Layout defaultStyles={defaultStyles}>
      <h1 onClick={handleChange}> Click me to toggle the global styles</h1>
   </Layout>

}

基本上，您正在创建一个布尔状态（最初设置为false）以在默认样式之间进行更改。该状态的结果（通过单击<h1> 进行切换）将向上发送到您的<Layout>，因此：

import React from "react"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.theme === "purple" ? "purple" : "white")};
  }
`
export default function Layout({ children, defaultStyles }) {
  return (
    <React.Fragment>
      {defaultStyles && <GlobalStyle theme="purple" />}
      {children}
    </React.Fragment>
  )
}

&& 运算符将仅在 defaultStyles 为 true 时呈现 <GlobalStyle>。根据您的需要调整它或根据需要添加三元条件。