styled-jsx

To support strict CSP, you must generate a unique nonce per request.

1. Generate a nonce (e.g., using nanoid).
2. Pass the nonce to registry.styles({ nonce }).
3. Set a <meta property="csp-nonce" content={nonce} /> tag in your HTML.
4. Ensure your Content-Security-Policy header includes the same nonce in the style-src directive.

import nanoid from 'nanoid'

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

To avoid generating snapshot noise from jsx classnames and vendor prefixing during tests, use the styled-jsx/babel-test plugin in your test environment. This plugin strips jsx attributes from <style> tags.

Note: When using styled-jsx/babel-test, you must mock styled-jsx/css to avoid errors, as the css tagged template literals will not be transpiled.

{
  "env": {
    "production": {
      "plugins": ["styled-jsx/babel"]
    },
    "development": {
      "plugins": ["styled-jsx/babel"]
    },
    "test": {
      "plugins": ["styled-jsx/babel-test"]
    }
  }
}

If a child component does not expose a className or other customization props, you can style it from the parent using the :global() selector. It is recommended to use the child (direct descendant) selector > to limit the scope of the global style to the intended subtree.

export default () => (
  <div>
    <ExternalComponent />

    <style jsx>{`
      /* "div" will be prefixed, but ".nested-element" won't */

      div > :global(.nested-element) {
        color: red;
      }
    `}</style>
  </div>
)

You can achieve dynamic styling by toggling class names on the element based on props.

const Button = props => (
  <button className={'large' in props && 'large'}>
    {props.children}
    <style jsx>{`
      button {
        padding: 20px;
        background: #eee;
        color: #999;
      }
      .large {
        padding: 50px;
      }
    `}</style>
  </button>
)

Any value from the component's render scope (like props or state) is treated as dynamic. For better performance, split static and dynamic styles into two separate <style jsx> tags so only the dynamic parts re-render.

const Button = props => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        color: #999;
        display: inline-block;
        font-size: 2em;
      }
    `}</style>
    <style jsx>{`
      button {
        padding: ${'large' in props ? '50' : '20'}px;
        background: ${props.theme.background};
      }
    `}</style>
  </button>
)

If you want to use css.resolve without modifying your .babelrc, you can use babel-plugin-macros.

1. Install dependencies: npm i --save styled-jsx npm i --save-dev babel-plugin-macros
2. Add babel-plugin-macros to your Babel configuration.
3. Import css from styled-jsx/macro instead of styled-jsx/css.

This approach is also compatible with create-react-app as it includes babel-plugin-macros by default.

npm i --save styled-jsx
npm i --save-dev babel-plugin-macros

{
  "plugins": ["babel-plugin-macros"]
}

import css from 'styled-jsx/macro'

const { className, styles } = css.resolve`
  a { color: green }
`

export default () => (
  <div className={className}>
    <Link className={className}>About</Link>
    {styles}
  </div>
)

The outermost element of a component automatically receives a unique jsx-{id} classname. To target this 'host' element specifically, use a class on the root element.

export default () => (
  <div className="root">
    <style jsx>{`
      .root {
        color: green;
      }
    `}</style>
  </div>
)

You can use constants (imported from other files) within your template literals. Note that constants defined outside the component scope are treated as static styles.

import { colors, spacing } from '../theme'
import { invertColor } from '../theme/utils'

const Button = ({ children }) => (
  <button>
    {children}
    <style jsx>{`
      button {
        padding: ${spacing.medium};
        background: ${colors.primary};
        color: ${invertColor(colors.primary)};
      }
    `}</style>
  </button>
)

Use the :global() pseudo-selector to escape scoping for specific selectors. This is useful for styling third-party components that use specific class names.

import Select from 'react-select'
export default () => (
  <div>
    <Select optionClassName="react-select" />

    <style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */
      div :global(.react-select) {
        color: red;
      }
    `}</style>
  </div>
)

To use styled-jsx, install the package via npm and add the styled-jsx/babel plugin to your Babel configuration. This enables the <style jsx> syntax in your JSX components.

npm install --save styled-jsx

{
  "plugins": ["styled-jsx/babel"]
}

To register plugins in a Next.js application, create a custom .babelrc file and pass the plugins array within the styled-jsx object inside the next/babel preset.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}