聞きたいこと
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」のような具体的な使い分け例があれば教えていただけると嬉しいです
正解を求めているというよりは、いろいろな考え方を知りたいと思っています。
お気軽にご意見いただければ幸いです。
回答1件
#1
総合スコア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で受け取ります
あなたの回答
tips
プレビュー