web-dev-qa-db-ja.com

警告：プロップ `className`が一致しませんでした。 Semantic-ui-reactでスタイル設定されたコンポーネントを使用する場合

このコードを使用して、ボタンを上からマージンで囲みます。

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

MarginButtonノードを使用すると、次のエラーが発生します：Warning: Propクラス名did not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

これが生成されたことがわかります ここ 。

私は何をすべきか？

reactjsjsxstyled-componentssemantic-ui-reactnext.js
5
Talha Talip Açıkgöz

Styled-componentsのbabelプラグインをインストールし、.babelrcでプラグインを有効にする必要があります

npm install --save-dev babel-plugin-styled-components

.babelrc

{
  "plugins": [
    [
      "babel-plugin-styled-components"
    ]
  ]
}
3
Mikhail Sidorov

PropTypeエラーは、小道具に渡されると予想されるデータが予想とは異なることを通知するランタイムエラーです。コンポーネントに設定されているclassNamepropは、コンポーネントがサーバーでレンダリングされるときと、クライアントのDOMでレンダリングされるときで同じではないようです。

サーバー側のレンダリングを使用しているように見えるため、クラス名が決定論的であることを確認する必要があります。このエラーは、サーバー上のstyled-componentsライブラリによって作成されているクラスと、それがDOMとどのように異なるかを示しています。通常、確定的なクラス名を持たないライブラリの場合は、高度な構成を確認する必要があります。 SSRに関連する特異性に関するstyled-componentsのドキュメントをご覧ください 。

2
brianespinosa

スタイル付きコンポーネントのサーバー側レンダリング

サーバーサイドレンダリングstyled-componentsは、スタイルシートの再ハイドレーションを使用した同時サーバーサイドレンダリングをサポートします。基本的な考え方は、サーバー上でアプリをレンダリングするたびに、ServerStyleSheetを作成し、コンテキストAPIを介してスタイルを受け入れるプロバイダーをReactツリーに追加できるということです。

これは、キーフレームやcreateGlobalStyleなどのグローバルスタイルに干渉せず、React DOMのさまざまなSSRAPIでスタイル付きコンポーネントを使用できます。


import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(sheet.collectStyles(<YourApp />))
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}



import { renderToString } from 'react-dom/server'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(
    <StyleSheetManager sheet={sheet.instance}>
      <YourApp />
    </StyleSheetManager>
  )
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

私の場合、nextjsを使用しているimとして

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

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    );
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
1
Ahmed Younes