How to fix Warning: Prop `style` did not match in React

import { useState, useEffect } from 'react';

export default function Component() {
  const [mounted, setMounted] = useState(false);
  const [styles, setStyles] = useState({});

  useEffect(() => {
    setMounted(true);
    // Safe to use window/document here
    setStyles({
      width: window.innerWidth > 768 ? '100%' : '50%'
    });
  }, []);

  if (!mounted) return null; // Or return a loading placeholder

  return <div style={styles}>Content</div>;
}

import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(
  () => import('../components/ClientOnlyComponent'),
  { ssr: false }
);

export default function Page() {
  return (
    <div>
      <ClientOnlyComponent />
    </div>
  );
}

import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

<div suppressHydrationWarning>
  <time>{new Date().toLocaleString()}</time>
</div>

// BAD - Will cause mismatch
function BadComponent() {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  return <div style={{ width: isMobile ? '100%' : '50%' }}>Content</div>;
}

// GOOD - Consistent on server and client
function GoodComponent({ isMobile }) {
  return <div style={{ width: isMobile ? '100%' : '50%' }}>Content</div>;
}

# Test your app in incognito/private mode
# If the warning disappears, a browser extension is the culprit

# Update libraries that commonly cause style mismatches
npm update @mui/material react-virtualized react-color

# Check GitHub issues for your specific library + "hydration"
# Many libraries have SSR-specific configuration options