vike-react-styled-jsx

vike-react-styled-jsx

Integrates styled-jsx into your vike-react app.

Installation
Settings
Version history
What it does
See also

Installation

• npm install vike-react-styled-jsx styled-jsx

• Extend +config.js:

  // pages/+config.js
  
  import vikeReact from "vike-react/config"
  import vikeReactStyledJsx from "vike-react-styled-jsx/config"
  
  export default {
    // ...
    extends: [vikeReact, vikeReactStyledJsx]
  }
  

• Add styled-jsx's Babel plugin:

  // vite.config.js
  import react from "@vitejs/plugin-react"
  import vike from "vike/plugin"
  
  export default {
    plugins: [
     vike(),
     react({
       babel: {
         plugins: [["styled-jsx/babel"]]
       }
     })
   ]
  }
  

• You can now use styled-jsx in any of your components.

  function SomeComponent() {
    return (
      <div>
       <p>Only this paragraph will get the style.</p>
       
       <style jsx>{`
         p {
           color: red;
         }
       `}</style>
      </div>
    )
  }
  

[!NOTE] The vike-react-styled-jsx extension requires vike-react.

Settings

vike-react-styled-jsx provides a configuration +styledJsx to set the CSP nonce for styled-jsx.

[!NOTE] You need to set a <meta property="csp-nonce" content={nonce} /> tag with the same nonce.

// pages/+styledJsx.js
export { styledJsx }

import nanoid from 'nanoid'

const styledJsx = {
  nonce: Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3
}

You can remove the vike-react-styled-jsx integration from some of your pages:

// pages/about/+styledJsx.js

export const styledJsx = null

For full customization consider ejecting.

[!NOTE] Consider making a Pull Request before ejecting.

What it does

The vike-react-styled-jsx extension allows you to use styled-jsx without FOUC.

It collects the page's styles during SSR and injects them in the HTML, ensuring that styles are applied early (before even JavaScript starts loading).

You can learn more at:

• Vike > CSS-in-JS > Collect styles
• styled-jsx README > Server Side Rendering

For more details, have a look at the source code of vike-react-styled-jsx (which is small).

See also

• Vike Docs > styled-jsx
• Vike Docs > CSS-in-JS
• styled-jsx README