Javascript 如何在盖茨比中的全局CSS onclick之间切换？

我正在盖茨比建立一个公文包网站，随着我在插图和设计方面的工作越来越多，我想提供多种设计选项来展示这项工作，基于用户通过点击选择。我发现了一些类似的问题，但没有一个是针对盖茨比的

我使用样式化组件来创建布局，所以在我看来，通过一个按钮在多个全局样式表（具有字体、颜色等）之间进行交换是一种可行的方法，因此布局保持不变，但我真的不知道如何实现这一点，因为我对盖茨比和Javascript基本上是初学者

提前谢谢

给出一个简单的

结构，如：

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

基本上，您正在创建一个布尔状态（最初设置为

false

），以在默认样式之间进行更改。该状态的结果（通过单击

进行切换）将向上发送到您的

，因此：

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

从“React”导入React
从“样式化组件”导入{createGlobalStyle}
const GlobalStyle=createGlobalStyle`
身体{
颜色：${props=>（props.theme==“紫色”？“紫色”：“白色”）}；
}
`
导出默认函数布局（{children，defaultStyles}）{
返回(
{defaultStyles&&}
{儿童}
)
}

---

和&

操作符仅在

defaultStyles

为

true

时才会渲染

。根据您的需要调整它，或者根据需要添加一个三元条件。

我不知道盖茨比，但是一个简单的方法是在

body

元素上使用不同的类。将类属性绑定到某种选择器（按钮、选择、单选等）。然后，您可以将该类前置到您想要更改的任何CSS选择器。这有助于你开始吗？我知道你要去哪里，我可能会那样去那里，但是对于盖茨比/react用例，我认为下面@Ferran建议的答案会更干净，并且有助于保持所有样式被眼睛分开！这肯定行得通。实际上，我刚刚在构建全屏切换导航菜单时了解了useState（）。如果我只在两种样式之间切换，这是非常有意义的。如果我有3种或更多的样式选项，我可以修改吗？我真的只熟悉切换/布尔上下文中的useState，但看看文档，它似乎是可能的？是的，肯定！它始终取决于您的用例和需求，但这种方法是完全可行和可扩展的

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