React framework Remix Prop className не соответствует

Я использую Styled-компонент с ремиксом

и я получил "Prop className не соответствует" этой ошибке, но я не знаю, как решить эту ошибку

Я искал об этой ошибке, но был только ответ о следующем 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>
  );
}

Не могли бы вы опубликовать код или код ошибки консоли, чтобы объяснить эту ошибку. Это просто абстрактно и бесполезно.

— 27.12.2022 05:04

«Предупреждение: Prop className не соответствует. Сервер: «sc-gswNZR iqcxXn». Клиент: «sc-bcXHqe djVGJv»». У вас нет номера строки или, откуда выдается ошибка?

— 27.12.2022 05:13

К сожалению да... это что

— 27.12.2022 05:16

Я не знаю, что происходит, но вы могли бы попробовать несколько возможных вещей: добавить свойство className в тег ссылки - <Link to = "/remixtamain"> - <Link to = "/" className = "remixtamain" >

— 27.12.2022 05:30

спасибо за комментарий! Мне нужно попробовать все, что я могу

— 27.12.2022 05:36

удачи и дайте нам знать решение, которое вы нашли :-P

— 27.12.2022 05:37

Проблема заключается в смешивании SSR с динамическими classnNames из Styled. Здесь есть еще один вопрос об этом с правильным ответом: Предупреждение: Prop `className` не соответствует. при использовании стилизованных компонентов с semantic-ui-react и это ссылка на Документы.

— 27.12.2022 05:39

Спасибо, ребята, я решил это, я нашел способ из Remix Docs remix.run/docs/en/v1/guides/styling#css-in-js-libraries

— 27.12.2022 05:50

reactjs styled-components remix

27.12.2022 04:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Awww я нашел способ в официальном документе

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

Я добавил этот {typeof document === "undefined"? «СТИЛИ»: null} в корневом 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>
  );
}

и его работа!

27.12.2022 05:47