时间戳

首页 > 解决方案 > 如何在 Gatsby 中的全局 CSS onclick 之间切换？

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

问题描述

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

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

提前致谢！

标签： javascriptcssgatsby

解决方案

给定一个简单的<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>
  )
}

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

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>so，那里：

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

&&运算符只会在is<GlobalStyle>时渲染。根据您的需要调整它或在需要时添加三元条件。defaultStylestrue

推荐阅读