Componentのwidthをどう指定するか
heightも同様の問題が起きるが、基本的にheight: autoで済むので問題にならない
問題になれば同じアプローチをすれば良い
Componentにも依る
例えばアイコンは100%横に伸びるのもおかしい
満たすべき前提
どういう問題があるか
上の条件を満たすためには、そのComponentは固定のwidthを持ってはいけない
この辺を指定することになる
width: auto
max-width: ...
width: 100%
etc.
そういうComponentをそのまま使用すると、理想状態より横に伸びることになる
https://gyazo.com/2543ed0456ff860cdf75f8481f3971e4
しかし、デザイン的にはおかしいので、何らかの方法でwidthを指定しないといけない
文脈的に「このComponentが利用されるとき」にしか決まらないので、
親が決定する
propsか何かで指定する
の2パターンぐらいしか方法がない
結論をタイトルにmrsekut.icon
↓これはwidthとは関係なく広い考え方でもある
いくつかのアイディアとその問題
Gridで指定する
code:ts
<div className="grid h-10 grid-cols-2rem,10ch items-center justify-between"> <CloseButton onClick={closeSidebar} />
<SubmitButton>印刷</SubmitButton>
</div>
配置とSubmitButtonのwidthの指定を同時にしてる
これ一番良い感じmrsekut.icon
https://gyazo.com/1ad9a0f7c700a1f50620e8686d469248
使用する時にdivで囲む
でも、これで良いんじゃない？という気もしてきているmrsekut.icon
styleをoverrideする仕組みを設ける
例えばこういうアプローチ
これは利用者に与えられる効力の範囲が大きすぎるという問題がある
今回問題にしているのはwidthだけである
この仕組みを設けると任意のstyleをoverrideできてしまう
propsとしてwidthを受け取るようにする
code:ts
type Props = {
width?: w-${number}
}
tailwind CSS固有の問題だが、使用時に補完が効かない
code:ts
<LoginForm width="w-200" />
このw-200という指定が実際は何remなのかを知ることが出来ない
これはこれで微妙なんだよなmrsekut.icon
widthの代わりに、basisを指定したいこともある
basisをpropsで持った場合、「flexの中で使う」ことが規定されてしまう
まあ、そういう目的だから正しいかmrsekut.icon
width指定用のComponentを用意する
interfaceで規定しようとしても、CSSで>などを使えば結局侵入されてしまう
CSS自体がカプセル化をやる気がないmrsekut.icon
CSS使っている時点で無理みたいなところある
外部から > divなどで、Componentの内部までのstyleはしない
Component内の構造を変えられなくなる
構造を変えるとどこかでstyleが崩れるということに気付け無い
これは別の話題だなmrsekut.icon