🧐
Radix-ui Themesのmin-heightどっから来てるの？
前書き
これは筆者がRadix-ui Themesでchrome-extensionを描いてるときに気づいたことで、何も入れてない状態でも、もしくは<Theme>{...}</Theme>だけ使ってる状態でも、デフォルトにmin-heightが入っている。普通は気にならないだが、chrome-extensionなどの状態だと、popupが必要以上の長さになるので気に食わないです。なのでどっから来たかを調べてみた。
図からわかるように、min-heightが入っています。実数値はデバイスと環境によって違います。
調査
結論このCSSのせいで、Root Theme Componentがmin-heightを持つようになった。
ソースコードを漁ってみたら意図的に書かれているようです。
こちらのURLでgithubから直接ソースコードを見ることができる。
解決法とツッコミ
<Theme style={{ minHeight: "auto" }}>もしくはCSSでoverrideすればいいですが、なぜ他のUIライブラリーはこのような動作を取ってないのにRadix-ui Themesだけなのが気になる。知ってる方がいたらぜひコメントください。
Discussion