Reactコンポーネント設計：スタイルをclassNameで渡すか、propsで渡すかの判断基準について

聞きたいこと

Reactでコンポーネントを設計する際、スタイルの受け渡し方法についてみなさんがどのような判断基準を持っているか、ご意見をお聞かせいただきたいです。
具体的には以下の2点についてです。

スタイルをclassNameで渡すか、専用のprops（例：size, variantなど）で渡すかの判断
そもそもclassNameを外部から受け渡せるようにするかどうかの判断

背景

コンポーネントを作成する際、スタイルのカスタマイズ性をどこまで許容するかで迷うことがあります。

TypeScript
1// パターンA: classNameで渡す
2<Button className="my-custom-style" />
3
4// パターンB: propsで渡す
5<Button size="large" variant="primary" />
6
7// パターンC: classNameを受け付けない（内部で完結）
8<Button />  // 外部からのスタイル上書き不可

classNameを許容すると柔軟性は上がりますが、意図しないスタイルの上書きが起きたり、コンポーネントの一貫性が損なわれるリスクもあると感じています。
一方で、propsのみだと想定外のカスタマイズ要件に対応できないこともあり...。

お聞きしたいこと

みなさんはどのような基準で判断されていますか？
チームや個人で運用ルールを決めていますか？
「この場合はclassName、この場合はprops」のような具体的な使い分け例があれば教えていただけると嬉しいです

正解を求めているというよりは、いろいろな考え方を知りたいと思っています。
お気軽にご意見いただければ幸いです。

回答3件

ミスターymmr

総合スコア64

投稿2025/12/13 11:23

編集2025/12/13 11:41

スタイルをclassNameで渡すか、専用のprops（例：size, variantなど）で渡すかの判断

props（variant/size…）を優先するケースとしては、デザインシステムで定義された「意味のあるバリエーション」を提供したいときです。
具体的には以下のケースです。

variant="primary" | "secondary" みたいに、見た目がデザイン上のルールと直結している
size="sm" | "md" | "lg" が、余白・高さ・フォントなど複数のスタイル束を一貫して切り替える
デザイナー/PdMとの会話でも「primaryのボタン」みたいに言葉で通じる

こういう場合、classNameで自由にされると、 “primaryなのに角丸が違う” といったことが起きるため、propsを優先する場合が多いです。

classNameを使用するケースとしては、「レイアウト調整」場合です。
具体的には以下のようなケースです。

margin, width, flex, grid など親レイアウト文脈の調整
“見た目の種類”ではなく、周辺の配置をいじりたいだけ

ここをpropsで全部受けると mt, mb, w, px みたいなprops地獄になりやすいため、「レイアウトはclassNameで逃がす」が現実的かと
また、margin/paddingなどコンポーネントの外側調整は親の責務でclassNameで受け取ります

tt-lv100

総合スコア216

投稿2025/12/23 11:24

自分はclassNameでスタイリングしたくない派です。
なので、propsで設定するです。
メリットとしては

styleの責務をそのコンポーネントで閉じれる（classNameだと親が責務をもってしまう）
「propsで賄えないとき = 別componentとする」みたいな判断軸ができる
デザイナーとデザインの揺れについて会話がしやすい

逆にcomponentで賄えきれない、余白や幅などはcomponentの責務から逃してます。
それはレイアウトに依存する部分だと思うので、親の責務（別componentやcomposition的考え方）にしています。
（親が決めたwidthで広がる感じです）
なので、他の人が回答しているmt, mb, w, pxみたいなのは逆にcomponentに持たせないにしてます！

自分なりの現状の結論は、最初に述べたように、classNameは受け取らず、component内でstyleを指定し、必要なパターンはpropsで指定
propsが多くなったり、「ここまで来たら別のcomponentやん」ってなったら分離するです！