From a7ed1a550ddad97f5cb249aeb0caa2218fac6277 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 28 Aug 2024 12:23:13 +0900
Subject: [PATCH] docs: add charcoal provider guide

---
 packages/react/docs/v4.0.0.mdx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/react/docs/v4.0.0.mdx b/packages/react/docs/v4.0.0.mdx
index 5110a2ae2..e468ea47e 100644
--- a/packages/react/docs/v4.0.0.mdx
+++ b/packages/react/docs/v4.0.0.mdx
@@ -33,6 +33,33 @@ function App() {
 - テーマに関する属性が削除されました。
   - `themeMap`, `defaultTheme`, `injectTokens`, `components`, `background`
 
+Before
+
+```tsx
+// ...
+
+<CharcoalProvider themeMap={themeMap}>
+  <YourApp />
+</CharcoalProvider>
+```
+
+After
+
+styled を継続して利用する場合
+
+```tsx
+// ...
+import { TokenInjector } from '@charcoal-ui/styled'
+import { ThemeProvider } from 'styled-components'
+
+<CharcoalProvider>
+  <TokenInjector theme={themeMap} />
+  <ThemeProvider theme={themeMap[':root']}>
+    <YourApp />
+  </ThemeProvider>
+</CharcoalProvider>
+```
+
 ## Button
 
 - `ComponentAbstraction`と`to`を用いたカスタム要素の設定を、`component`に`React.ElementType`を指定することによって行えるように変更しました。