styled-componentsとは？React CSS-in-JS

ページ内ナビ

概要

styled-componentsはtagged template literalでReact componentへCSSを結び付け、生成class nameによるscope、propsに応じたdynamic style、theme、global style、SSRを提供するCSS-in-JS libraryです。client componentだけでなくserver componentやstreaming SSR、React Nativeも同じAPI familyで扱います。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

styled.elementでCSSとReact componentを一体化する

styled.button等でcomponentを定義し、pseudo selector、media query、nesting、keyframes等の通常のCSS表現をtemplate literal内で利用できます。

出典：[1]

props・ThemeProvider・css helperでvariantとdesign tokenを構成する

component propsからdynamic styleを生成し、ThemeProviderでdesign tokenを共有し、css helperで再利用可能なstyle blockを構成できます。

出典：[1]

SSR・RSC・React Nativeまで同じstyling modelを広げる

READMEはserver components、client components、streaming SSR、React Nativeを対象に掲げ、runtime environmentに応じたstylingを提供します。

出典：[1][2]

向いている用途

component単位でCSSとvariantを管理するReact design systemに向く

class name namingやCSS file分割よりもcomponent abstractionを中心にstylingを整理し、themeやpropsでvariantを組み立てたいUI codebaseに適します。

出典：[1]

導入前の確認

6.5.3はReact 16.8以上・Node 16以上を要求する

package metadataはReact/React DOM >=16.8.0とNode >=16を要求します。React Nativeを使う場合はReact Native >=0.68.0もpeer条件です。

出典：[2]

6.5.3はTypeScriptのdata-*拡張時の型errorを修正するpatch release

6.5.3ではReact HTML propsへdata-* template-literal index signatureを追加したprojectで発生するTypeScript errorが修正されています。

出典：[3]

参考にした公式資料

[1]styled-components 6.5.3 README(2026-10-05)
[2]styled-components 6.5.3 package metadata(2026-10-05)
[3]styled-components 6.5.3 release(2026-10-05)
[4]styled-components MIT license(2026-10-05)

編集部からの補足

v6はTypeScript型をpackage内に含み、React Server Components/streaming SSRも対象にしています。既存v5 codebaseではmigration差分とruntime styling costを確認してください。

3ステップで試す

1
styled-components 6.5.3を固定して導入する
一時npm projectへstyled-componentsとReact peer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/styled-components.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact styled-components@6.5.3 react@19.2.0 react-dom@19.2.0
2
package versionを確認する
review対象versionが導入されていることを確認します。
test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/styled-components/package.json')).version)")" = '6.5.3'
3
styled・theme・css APIを確認する
browserを起動せず、component生成・shared style・themeの主要APIが利用可能であることを確認します。
test "$(node --input-type=module -e "import styled,{css,ThemeProvider} from 'styled-components'; console.log(Boolean(styled.div&&css&&ThemeProvider))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

41,099 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 3
Open PR: 12

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
css-in-js
styled-components
css
reactnative
rsc

Stars: 41,099
Forks: 2,672
Watchers: 397
Open Issues: 12
Contributors: 345
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/28

概要

特徴と向いている用途

主な特徴

styled.elementでCSSとReact componentを一体化する

props・ThemeProvider・css helperでvariantとdesign tokenを構成する

SSR・RSC・React Nativeまで同じstyling modelを広げる

向いている用途

component単位でCSSとvariantを管理するReact design systemに向く

導入前の確認

6.5.3はReact 16.8以上・Node 16以上を要求する

6.5.3はTypeScriptのdata-*拡張時の型errorを修正するpatch release

参考にした公式資料

3ステップで試す

styled-components 6.5.3を固定して導入する

package versionを確認する

styled・theme・css APIを確認する

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪