Nextjs切换body背景颜色

Question

我正在尝试制作一个按钮来更改 Nextjs 中的背景。为什么这不起作用？

_app.js

import '../styles/global.css'
import { AppProps } from 'next/app'
import { useState } from 'react'


export default function App({ Component, pageProps }: AppProps) {
  const [isDark, setIsDark] = useState(false)
  
  return (
    <>
      <Component {...pageProps} />
      <style jsx global>{`
        ${ isDark ? 'body {background: darkslategray;}' : 'body {background: antiquewhite;}' }
      `}</style>
    </>
  )
}

Answer 1

我不确定内部实现，styled-jsx但显然这是有效的：

<style jsx global>{`
  body {
    background: ${isDark ? "darkslategray" : "antiquewhite"};
  }
`}</style>

查看文档

有理由认为您的代码也可以正常工作，因此您可以向styled-jsx提出问题。