--- title: styled-componentsがメンテナンスモードに移行　新規プロジェクトでは非推奨に url: https://roboin.io/article/2025/03/22/styled-components-moves-to-maintenance-mode/ description: Reactでコンポーネントをスタイリングする際のCSS-in-JSライブラリーのひとつとして人気だったstyled-componentsが、メンテナンスモードに移行していたことが分かりました。 publishedDate: 2025-03-22T09:09:58.000Z modifiedDate: 2025-03-22T09:41:20.000Z thumbnail: https://roboin.io/api/media/file/thumbnail-73.png thumbnailAlt: サムネイル thumbnailCaption: 画像：[styled-components公式サイト](https://styled-components.com/) --- # 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](https://npmtrends.com/@emotion/react-vs-styled-components-vs-tailwindcss)によると、styled-componentsやEmotionの最近のダウンロード数はほぼ横ばいとなっている一方で、Tailwind CSSは順調にダウンロード数を伸ばしています。 記事執筆時点では、styled-componentsのダウンロード数は、Tailwind CSSと比較して半分以下となっています。 ![@emotion\/react、styled-components、tailwindcssのダウンロード数は比較したnpm trendsのグラフの画像](https://roboin.io/api/media/file/image-1269.png) ## 今後はバグ修正のみ quantizor氏は、利用者に負担をかけないため、ライブラリーのAPIや機能を根本的に変更しない方針を示しています。 そのため、styled-componentsはReactのContext APIを利用しているAPIなどを削除せず、定期的にバグ修正や改善を実施して既存のユーザーが引き続き利用できるようにするとのことです。 同氏によると、新しいプロジェクトではstyled-componentsをはじめとしたほとんどのCSS-in-JSの採用を推奨しないとのことです。 Open Collectiveでのstyled-componentsへの定期的な寄付はキャンセルされています。 また、styled-componentsの特定の問題に対してバグ報奨金が随時発行される可能性はあるようです。 ## 参考リンク - [Thank you - Open Collective](https://opencollective.com/styled-components/updates/thank-you)