ReactでのComponentのStyle
ReactでCSSやるときに気をつけること
Component分割とCSSの共存をいかにやるか
>#WIP
Server Componentsが出てきた時代には、
Componentの分割仕方が、パフォーマンスと密接するようになってしまった
ここにかくことではないかもな
見出し&コンテンツの、Componentの分割の仕方も悩み
ts<Section>
<H2>こんにちは</H2>
<P>こんにちは、おはようおはよう、こんばんわ</P>
</Section>
<Section>
...
</Section>↑全く同じ文章で、この塊を再利用したいことがある
このときのComponentの分割の仕方が難しい
同じレイアウトだが、特殊対応しているときなど
案
<Section>...</Section> をまるごと分けるcons:
Section , H2 , P のstyleが散らばってしまうこのfeature専用の
Section , H2 , P を定義して、それを再利用するまあこれかな、という感じはする
pbfになっていればうまく機能しそう
Reactでchildrenでなんかをだしたいとき
<P>{children}</P> このときのPのサイズって、「子のサイズによって決まる」べきってこともあるんだよな
例えばModalとか
<Modal></Modal> 自体はサイズのことは知らなくて良い子のサイズによって決まってくれればいい
これはこれで微妙だな
そうなるとchilden自体は絶対値指定しないといけなくなる
となると、そのchildrenに相当するComponentは使用する場所が固定されるということを意味してしまう
となると、やはりModal自体に
heigt/width 的なpropsをもたせるなりして、親で指定すべき、という気がするhタグをどう扱うか
Component内で適当に
h4 とかに定めると使われるケースによっては不適切になる解決策として、使われている箇所のHのlevelを取得して自動でincrementする
<H> を作るなどするComponentの責務を意識する
Interfaceはその責務を明確にする役割を持つ
classNameをpropsに持ち、外部からstyleを変更できるようにするのは、そのやり方としてかなり難易度が高いので、やるべきでない
結果的に保守性の低下に繋がる
正しいっちゃ正しいのだが、難しいのでやるべきでない、という感じ
「どんなスタイルが来ても対応できます！」を実行できるような内部実装でないといけなくなる
パターンどんだけ多いねん、になる
classNameのような抽象的なInterfaceを取るのではなく、
color などの具体的なInterfaceを定義したほうが良いそうすれば、「このComponentは、色の表示の仕方も責務に持つ」ということが明確になる
classNameやstyleは公開すべきではない
どうしても必要な場合は代わりに、
UNSAFE_className を公開するなどこれ、責務の決め方にも依るよなあ、と最近思ってる
headless uiのように、機能に全振りしたものであれば、classNameを公開することが前提になる
大枠の装飾だけの目的でならclassName公開しても良い気もする
内部を触ってこないなら大丈夫、という場合は多そう
レイアウトに関するスタイルは一箇所で書くようにする
ペアになるようなスタイル
display:flec.jsconst StyledWrapper = styled.div`
display: flex;
& > .hoge {
flex: 〇〇;
}
`;例を知りたい #??
positionのrelative/absoluteとかも？
レイアウトに関するHTMLタグは一箇所で書く
上のやつのHTML版
例
thとtd
liとdtとdd