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