ろぼいんブログ

styled-componentsがメンテナンスモードに移行 新規プロジェクトでは非推奨に

サムネイル
画像:styled-components公式サイト

Reactでコンポーネントをスタイリングする際のCSS-in-JSライブラリーのひとつとして人気だったstyled-componentsが、メンテナンスモードに移行していたことが分かりました。

コアメンテナーによると、新しいプロジェクトではstyled-componentsをはじめとしたほとんどのCSS-in-JSの採用を推奨しないとのことです。

広告

styled-componentsがメンテナンスモードに移行

styled-componentsのコアメンテナーのquantizor氏は2025年3月18日、2025年現在styled-componentsがメンテナンスモードになっているとする声明をOpen Collectiveに投稿しました。

この声明によると、styled-componentsは次のような理由でメンテナンスモードに移行したとのことです。

  • ReactのコアチームがContext APIなどの一部のAPIを事実上の非推奨にしたため
  • CSS-in-JSよりもTailwind CSSなどのほかのテクノロジーの人気が高まったため
  • quantizor氏自身が大規模なアプリケーションでstyled-componentsを積極的に運用しなくなったため

Reactでは近年、React Server Components(RSC)などの新しいテクノロジーが登場していますが、styled-componentsが利用しているContext APIはRSCで利用できず、事実上の非推奨になっています。

また、最近ではstyled-componentsやEmotionのようなCSS-in-JSよりも、Tailwind CSSなどのユーティリティファーストCSSの人気が高まっています。

npmにおけるパッケージのダウンロード数を比較できるnpm trendsによると、styled-componentsやEmotionの最近のダウンロード数はほぼ横ばいとなっている一方で、Tailwind CSSは順調にダウンロード数を伸ばしています。

広告

記事執筆時点では、styled-componentsのダウンロード数は、Tailwind CSSと比較して半分以下となっています。

@emotion/react、styled-components、tailwindcssのダウンロード数は比較したnpm trendsのグラフの画像

今後はバグ修正のみ

quantizor氏は、利用者に負担をかけないため、ライブラリーのAPIや機能を根本的に変更しない方針を示しています。

そのため、styled-componentsはReactのContext APIを利用しているAPIなどを削除せず、定期的にバグ修正や改善を実施して既存のユーザーが引き続き利用できるようにするとのことです。

同氏によると、新しいプロジェクトではstyled-componentsをはじめとしたほとんどのCSS-in-JSの採用を推奨しないとのことです。

Open Collectiveでのstyled-componentsへの定期的な寄付はキャンセルされています。

広告

また、styled-componentsの特定の問題に対してバグ報奨金が随時発行される可能性はあるようです。

参考リンク

記事をシェア

Xに共有するBlueskyに共有するMisskeyに共有するLINEに共有するThreadsに共有する

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加するXのロゴ
広告
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。