Setting global css rule as expresion of ternary operator not working

Author: ignacio-gcCreated Sep 4, 2020Updated Sep 20, 2023

What is the current behavior?

Trying to set the body background color conditionally in the _app.js file with a ternary operator.

If the entire css rule is used as an expression of the ternary operator the rule has no effect:

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

If the ternary operator is used to select only the value of the property inside the rule works

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

Steps to reproduce

Put this code in _app.js

bash

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

What is the expected behavior?

The body background should change color

Environment (include versions)

OS: Archlinux
Browser: Firefox 80.0.1 64bit
styled-jsx (version):

Did this work in previous versions?

Didn't try

Source: vercel/styled-jsx

View original on GitHub View discussion on GitHub