reactjs - スタイル付きコンポーネントがオブジェクトを生成するのはなぜですか?

Why is Styled Components Generating an Object?

スタイル付きコンポーネントを使用する非常に基本的なコードがいくつかあります。

import styled from 'styled-components';

const Test = () => <div>foo</div>;
const StyledTest = styled(Test)`
  border: 10px solid red;
`;
console.log(typeof StyledTest); // object!!!

問題は、console.log の最後の行がオブジェクト (関数ではない) をログに記録していることです。これを使用しようとすると、当然ながらエラーが発生します。

これは、ライブラリからコンポーネントをスタイルしようとしたときにも発生します。

import Modal from 'react-modal';
const StyledModal = styled(ReactModalAdapter)`
  border: 10px solid red;
`;
console.log(typeof StyledModal); // object!!!

私の何が間違っているのでしょうか?

-----------------------------------

ここでの答えは私の質問に対する答えですが、私が遭遇した問題に遭遇した人（つまり、StyledTest に相当する関数/クラスではないというエラーが発生した場合）にとって、答えはおそらく次のとおりです。 React/Styled Components のバージョンが同期していません。参照:

-----

styled-component 要素の console.log は常にオブジェクトになります。

コードが正しく動作するには、StyledTest を次のように変更する必要があります。

const StyledTest = styled.div`
  border: 10px solid red;
`;

これをテストで使用します。

const Test = () => <StyledTest>foo</StyledTest>;

まずスタイルを設定し、作成したものを適用する必要があります。

先ほどと同じように作成するには、StyledTest で渡すパラメータはスタイル コンポーネントである必要があるため、次のようなものがあるとします。

const Test = styled(({ ...rest }) => <div {...rest} />)`
  border: 10px solid red;
`;

const StyledTest = styled(Test)`
  border: 10px solid blue;
`;

この例では、Test はスタイル付きコンポーネント要素であるため、これを編集できます。

-----------------------------------

ありがとう、私が見逃していたのは、小道具を通す必要があるという部分でした...ドキュメントに隠されています! ;)

-----

問題ありません ð はい、それはドキュメント上のすべてを見つけるのは常に困難です。 ð 時々、ドキュメントが好きではないことがあります。

-----