Prop did not match ⚛️ React

Warning: Prop `className` did not match. Server: "x" Client: "y"

A prop rendered on the server differs from the client — usually CSS-in-JS class names or random IDs.

Seen on: React

Meaning

styled-components/emotion/MUI need SSR setup so server and client generate identical class names; random values (Math.random, Date) differ too.

Common causes

  • CSS-in-JS without SSR configuration (Next.js)
  • Random/time-based values in render
  • Different data on server and client

⚡ Quick fix

  1. Configure the styling library for SSR (Next.js compiler styledComponents: true / emotion cache)
  2. Use useId for IDs
  3. Move random values into effects

Detailed fix by platform

React

  1. jsx
    // next.config.js
compiler: { styledComponents: true }

How to diagnose

  1. Prop — Which prop?
  2. Values — Server vs client value

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.