NextJS切换主体背景色

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>

请参见docs

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