回答編集履歴
3
修正
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
> スタイルをclassNameで渡すか、専用のprops（例：size, variantなど）で渡すかの判断
|
|
2
2
|
|
|
3
|
-
props（variant/size…）を優先するケースとしては、「意味
|
|
3
|
+
props（variant/size…）を優先するケースとしては、デザインシステムで定義された「意味のあるバリエーション」 を提供したいときです。
|
|
4
4
|
具体的には以下のケースです。
|
|
5
5
|
- variant="primary" | "secondary" みたいに、見た目がデザイン上のルールと直結している
|
|
6
6
|
- size="sm" | "md" | "lg" が、余白・高さ・フォントなど複数のスタイル束を一貫して切り替える
|
|
@@ -8,9 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
こういう場合、classNameで自由にされると、 “primaryなのに角丸が違う” といったことが起きるため、propsを優先する場合が多いです。
|
|
10
10
|
|
|
11
|
-
className
|
|
11
|
+
classNameを使用するケースとしては、「レイアウト調整」 場合です。
|
|
12
12
|
具体的には以下のようなケースです。
|
|
13
13
|
- margin, width, flex, grid など 親レイアウト文脈の調整
|
|
14
14
|
- “見た目の種類”ではなく、周辺の配置をいじりたいだけ
|
|
15
15
|
|
|
16
|
-
ここをpropsで全部受けると mt, mb, w, px みたいなprops地獄になりやすいため、「レイアウトはclassNameで逃がす」 が現実的かと
|
|
16
|
+
ここをpropsで全部受けると mt, mb, w, px みたいなprops地獄になりやすいため、「レイアウトはclassNameで逃がす」 が現実的かと
|
|
17
|
+
また、margin/paddingなどコンポーネントの外側調整は親の責務でclassNameで受け取ります
|
2
追記
answer
CHANGED
|
@@ -11,4 +11,6 @@
|
|
|
11
11
|
className を優先（あるいは併用）するケースとしては、「意味はないけど、レイアウト都合で調整したい」 場合です。
|
|
12
12
|
具体的には以下のようなケースです。
|
|
13
13
|
- margin, width, flex, grid など 親レイアウト文脈の調整
|
|
14
|
-
- “見た目の種類”ではなく、周辺の配置をいじりたいだけ
|
|
14
|
+
- “見た目の種類”ではなく、周辺の配置をいじりたいだけ
|
|
15
|
+
|
|
16
|
+
ここをpropsで全部受けると mt, mb, w, px みたいなprops地獄になりやすいため、「レイアウトはclassNameで逃がす」 が現実的かと
|
1
途中で送信してしまったので続きを記入
answer
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
> スタイルをclassNameで渡すか、専用のprops（例：size, variantなど）で渡すかの判断
|
|
2
2
|
|
|
3
|
-
props（variant/size…）を優先するケースとしては、「意味を持つ見た目の違い」 を提供したいときで
|
|
3
|
+
props（variant/size…）を優先するケースとしては、「意味を持つ見た目の違い」 を提供したいときです。
|
|
4
4
|
具体的には以下のケースです。
|
|
5
5
|
- variant="primary" | "secondary" みたいに、見た目がデザイン上のルールと直結している
|
|
6
6
|
- size="sm" | "md" | "lg" が、余白・高さ・フォントなど複数のスタイル束を一貫して切り替える
|
|
7
7
|
- デザイナー/PdMとの会話でも「primaryのボタン」みたいに言葉で通じる
|
|
8
8
|
|
|
9
|
-
こういう場合、classNameで自由にされると、
|
|
9
|
+
こういう場合、classNameで自由にされると、 “primaryなのに角丸が違う” といったことが起きるため、propsを優先する場合が多いです。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
className を優先（あるいは併用）するケースとしては、「意味はないけど、レイアウト都合で調整したい」 場合です。
|
|
12
|
-
|
|
12
|
+
具体的には以下のようなケースです。
|
|
13
|
-
|
|
13
|
+
- margin, width, flex, grid など 親レイアウト文脈の調整
|
|
14
|
+
- “見た目の種類”ではなく、周辺の配置をいじりたいだけ
|