React framework Remix Prop className did not match

Question

I'm using Styled-component with remix

and I got "Prop className did not match" this error but I don't know How to solve this error

I searched about this error but There was only answer about next js

help me

console error

Warning: Prop `className` did not match. Server: "sc-gswNZR iqcxXn" Client: "sc-bcXHqe djVGJv"

this is code I just starting to develope my project with remix and styled-component

I think it because of server side rendering problem however I couldn't solve this error

code

import { Link } from "@remix-run/react";
import styled from "styled-components"

  export const Container =  styled.div`
    text-align: center;

    && img{
      width: 100px;
    }
  `
export default function Index() {
  return (
    <Container>
      <Link to="remixtamain">
        <img src={"https://ifh.cc/g/jd5MrN.png"}/>
      </Link>
    </Container>
  );
}

Could you please post some code or console error code to explain this error. This is just abstract and is not helpful. — Parthan_akon, Dec 27 '22 at 04:04
"Warning: Prop `className` did not match. Server: "sc-gswNZR iqcxXn" Client: "sc-bcXHqe djVGJv"" is that it? u dont have the or line number from where the error is thrown? — Parthan_akon, Dec 27 '22 at 04:13
I dont know what is happening but you could try a few possible things - Add a className prop to your link tag - - — Parthan_akon, Dec 27 '22 at 04:30
thank you for comment me ! I need to try everything that I can — GeonwooLee, Dec 27 '22 at 04:36
The problem is mixing SSR with dynamic classnNames from Styled. There's another question about it here with the correction answer: [Warning: Prop \`className\` did not match. when using styled components with semantic-ui-react](https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman) and [this is the Docs link](https://styled-components.com/docs/advanced#issues-with-specificity). — Zac Anger, Dec 27 '22 at 04:39
Thank you guys I solved it I found the way from Remix Docs https://remix.run/docs/en/v1/guides/styling#css-in-js-libraries — GeonwooLee, Dec 27 '22 at 04:50

score 0 · Accepted Answer · answered Dec 27 '22 at 04:47

Awww I found the way in an official document

https://github.com/remix-run/examples

this is the example SSR styleing

First I edit entry.server.tsx like this


import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
import { ServerStyleSheet } from "styled-components";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const sheet = new ServerStyleSheet();

  let markup = renderToString(
    sheet.collectStyles(
      <RemixServer context={remixContext} url={request.url} />
    )
  );
  const styles = sheet.getStyleTags();

  markup = markup.replace("__STYLES__", styles);

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

I added this {typeof document === "undefined" ? "STYLES" : null} in root tsx

in Head tag

import type { MetaFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        {typeof document === "undefined" ? "__STYLES__" : null}
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

and its work!

React framework Remix Prop className did not match

1 Answers1