Далее js переключить цвет фона тела

Question

Пытаюсь сделать кнопку для смены фона в Next js. Почему это не работает?

_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 .