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

o7jaxewo  于 2022-12-29  发布在  React
关注(0)|答案(1)|浏览(131)

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

    • 控制台错误**
  1. Warning: Prop `className` did not match. Server: "sc-gswNZR iqcxXn" Client: "sc-bcXHqe djVGJv"

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

    • 代码**
  1. import { Link } from "@remix-run/react";
  2. import styled from "styled-components"
  3. export const Container = styled.div`
  4. text-align: center;
  5. && img{
  6. width: 100px;
  7. }
  8. `
  9. export default function Index() {
  10. return (
  11. <Container>
  12. <Link to="remixtamain">
  13. <img src={"https://ifh.cc/g/jd5MrN.png"}/>
  14. </Link>
  15. </Container>
  16. );
  17. }
sbdsn5lh

sbdsn5lh1#

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

  1. import type { EntryContext } from "@remix-run/node";
  2. import { RemixServer } from "@remix-run/react";
  3. import { renderToString } from "react-dom/server";
  4. import { ServerStyleSheet } from "styled-components";
  5. export default function handleRequest(
  6. request: Request,
  7. responseStatusCode: number,
  8. responseHeaders: Headers,
  9. remixContext: EntryContext
  10. ) {
  11. const sheet = new ServerStyleSheet();
  12. let markup = renderToString(
  13. sheet.collectStyles(
  14. <RemixServer context={remixContext} url={request.url} />
  15. )
  16. );
  17. const styles = sheet.getStyleTags();
  18. markup = markup.replace("__STYLES__", styles);
  19. responseHeaders.set("Content-Type", "text/html");
  20. return new Response("<!DOCTYPE html>" + markup, {
  21. status: responseStatusCode,
  22. headers: responseHeaders,
  23. });
  24. }

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

  1. import type { MetaFunction } from "@remix-run/node";
  2. import {
  3. Links,
  4. LiveReload,
  5. Meta,
  6. Outlet,
  7. Scripts,
  8. ScrollRestoration,
  9. } from "@remix-run/react";
  10. export const meta: MetaFunction = () => ({
  11. charset: "utf-8",
  12. title: "New Remix App",
  13. viewport: "width=device-width,initial-scale=1",
  14. });
  15. export default function App() {
  16. return (
  17. <html lang="en">
  18. <head>
  19. <Meta />
  20. <Links />
  21. {typeof document === "undefined" ? "__STYLES__" : null}
  22. </head>
  23. <body>
  24. <Outlet />
  25. <ScrollRestoration />
  26. <Scripts />
  27. <LiveReload />
  28. </body>
  29. </html>
  30. );
  31. }

和它的工作!

展开查看全部

相关问题