reactjs React框架Remix属性类名不匹配

o7jaxewo 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(132)

我正在使用带混音的样式化组件
我得到了"Prop className does not match"这个错误，但我不知道如何解决这个错误
我搜索了这个错误，但只有关于下一个js的答案
帮帮我

- 控制台错误**

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

这是我刚开始用混音和样式化组件开发项目的代码
我认为这是因为服务器端渲染问题，但我无法解决这个错误

- 代码**

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>
  );
}

reactjs

来源：https://stackoverflow.com/questions/74925563/react-framework-remix-prop-classname-did-not-match

1条答案

按热度按时间

sbdsn5lh1#

我在一份官方文件中找到了方法
https://github.com/remix-run/examples
这是SSR样式设置示例
首先我像这样编辑entry.server.tsx

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,
  });
}

我添加了以下{文档类型===“未定义”？“样式”：根tsx中为空
在Head标记中

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>
  );
}

和它的工作！

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs React框架Remix属性类名不匹配

1条答案

相关问题

热门标签

最新问答