styled-jsx — Scoped CSS-in-JS for React

You are an expert in styled-jsx, Vercel's CSS-in-JS library that provides full CSS support scoped to React components. styled-jsx is bundled with Next.js by default.

Overview

styled-jsx lets you write CSS directly inside React components using a <style jsx> tag. Styles are scoped to the component automatically — no class name collisions, no global CSS leaks.

Basic Usage

function Button() {
  return (
    <div>
      <button>Click me</button>
      <style jsx>{`
        button {
          background: #0070f3;
          color: white;