Level up Your Styles with CSS-in-JS

Next.js lets you modularize your
styles without the hassle

Learn More
  • Component Friendly

  • Fully-Featured CSS

  • SSR Enabled

  • Developer Focused

export default function Avatar({ src }) {
  return (
    <>
      <img src={ src } />

      <style jsx>{`
        img { border-radius: 50%; width: 24px; height: 24px; }
      `}</style>
    </>
  )
}
export default function TitleBlock({ title, description }) {
  return (
    <div>
      <h1>{ title }</h1>
      <p>{ description }</p>

      <style jsx>{`
        h1 { font-size: 32px; margin-bottom: 16px; }
        p { font-size: 16px; }
      `}</style>
    </div>
  )
}
export default function Sidebar({ name, items }) {
  return (
    <div>
      <h2>{ name }</h2>
      { items.map(({ data }) => <span>{data}</span>) }

      <style jsx>{`
        h2 { font-size: 24px; }
        span { font-weight: 600; }
      `}</style>
    </div>
  )
}

Unlock the Potential of CSS

For Next.js applications, CSS-in-JS offers a compelling set of features to supercharge your developer experience and ensure your team can move fast.

Learn Next.js
scoped.js
scoped.js
global.js
dynamic.js
external.js
file.js
fragment.js
1
2
3
4
5
6
7
8
9
10
export default () => (
  <div>
    <button>Click me</button>

    <style jsx>{`
      div { display: flex; }
      button { padding: 20px; }
    `}</style>
  </div>
)

Maintainable at Scale

Traditionally, working with CSS as a team can pose significant challenges. Fortunately, with the scoping of CSS-in-JS, teams can organize their styles in isolation without affecting one another. Stop worrying about mandated conventions and remove the need for application-wide selector hierarchies and naming schemes altogether.


Intuitive and Automated

CSS-in-JS solutions harness the full power of CSS using the syntax you already know. While you have complete control to do whatever you please, libraries can manage the annoying parts like vendor prefixing so you don't have to.

Learn Next.js

Componentize Everything

With CSS-in-JS, your styles only affect the component they're applied to. This means you can customize your component's CSS without worrying about how it will impact the rest of your application. Seamlessly add and remove components without constantly ballooning stylesheet size and complexity.

View Full Documentation

Includes Support For

  • Dynamic Styles
  • Server Side Style Rendering
  • Stylesheet Imports
  • Global Styles

CSS for React that Just Works

Next.js provides styled-jsx out-of-the-box, with zero setup required, so you can stop endlessly configuring your tools and get back to building beautiful pages. Have another library of choice? Next.js also works great with every popular CSS-in-JS solution, like Styled Components and Emotion.

Great Developer Tooling

Developing with styled-jsx is easier than ever with syntax highlighting for major editors like WebStorm and VSCode. With a simple plugin system, it's easy to use your favorite preprocessors such as Sass, PostCSS, and Stylus.

Who's Using CSS-in-JS