React で独自コンポーネントに直接 className でクラスを付与することはできますか？

Question

実現したいこと

独自コンポーネントにclassNameでclassを付与したいです。

前提

Next.js の 13 を使っています。
普段 vue や nuxt を使うことが多いのですが 通常独自のコンポーネントにclassを付与する事はよくあると思います。

それをReactでも行いたいという感じです。

以下の様にすると Property className does not exist on type intrinsicattributes とのメッセージがエディタ上に出てしまうのと、実際に mt-[30px] は効いていません。
直接 上の div に対しては効くのですがこれはなぜでしょうか？

const Page = () => {
  return (
     <div>
      <MyTable className="mt-[30px]" />
    </div>
  );
};

export default Page;

発生している問題・エラーメッセージ

Property className does not exist on type  intrinsicattributes

TS や Vue 系は長く使っていますが React 系は慣れていないため、恐れ入りますが ご教示いただけますと大変助かります。

Answer 1

これはなぜでしょうか？

エラーメッセージの通り、MyTable側でclassNameを受け取る処理を書いていないからです。

Comments

[maisumakun]

ReactのコンポーネントはHTMLに直接埋め込まれるものではない（それ自体がネイティブにclassNameを持つわけではない）ですが、コンポーネントがclassNameを受け取って、コンポーネント内で生成するHTML要素に対してclassNameを割り振るような実装は可能です。

Answer 2

おそらく<MyTable />というのは独自でつくっているコンポーネントかと思いますが
コンポーネントに対してclassNameを割り当てることはできません。
classNameが付与できるのは基本、htmlで使用できるタグdiv p h1などです。
Reactの基礎から学び直しましょう。

Comments

[DaisukeMori]

誰が依頼したか分かりませんが、そのまま文章通りです。
どこが分かりにくかったのか修正依頼をかけた人は具体的にコメントお願いします。

そもそも修正依頼をかけただけは何も解決しないと思うのでその辺コミュニーケーション取るべきかと思います。

[maisumakun]

> コンポーネントに対してclassNameを割り当てることはできません。

この説明そのものが適切ではありません（「どう頑張ってもclassNameは使えない」と解釈されかねません）。自分で実装すれば、classNameに対応させることは可能ということもありえます。