styled-components の createGlobalStyle

styled-components の機能で最も好きなのは createGlobalStyle だ。

これはグローバルな CSS 定義を React で書ける API で、

普通は Next.js の _app.jsx など限定的な（それもほぼ静的な定義での）使い方しかされないのだが、悪用すると無限の可能性がある。

グローバルな CSS 定義をリアクティブにできるというのはまさに CSS in JS だから無しうる仕事で、style 属性でも CSS Modules でも CSS Variables でも困難なことができる。

※ 2025-01-26 追記:

React v19 で<style>がビルトインになったので、以下のことをやるのにstyled-componentsは必要なくなった

たとえば、@font-face を動的に変えることができる

code:typescript

export default createGlobalStyle`

@font-face {

font-family: "my-original-font";

src: url(${props => https://fonts.example.com/subset?text=${uniq(props.currentInput).sort()}});

}

WYSIWYG とか、フォントを選択して自由に変えられる文字入力 UI を作っていると、フォントのサブセットをコンポーネントの状態に応じてリクエストして CSS に反映みたいなことがしたくなる。こういう機能は今のところ createGlobalStyle 以外の方法でやるのはむずかしい。

選択するフォントが1個しかないケースなら CSS Variables でも行けなくはなさそうだが、たとえば次のようなケースには対応できないように思う。

code:typescript

export default createGlobalStyle`

${props => props.fonts.map(font => css`

@font-face {

font-family: my-original-font-${font.name};

src: url(${props => https://fonts.example.com/subset?text=${uniq(font.requiredChars).sort()}});

}

`)}

こういう無茶なことをやるためだけに、コンポーネントのスタイリングが s-c じゃないプロジェクトに s-c を入れたことがある。

個人的には createGlobalStyle だけを提供する単機能ライブラリがあると理想的なのだが、まぁそれは流行らんかな。