diff --git a/README.md b/README.md index 3d58a2f07..eb3398286 100755 --- a/README.md +++ b/README.md @@ -89,13 +89,13 @@ This boilerplate is made for creating chrome extensions using React and Typescri ### Chakra UI -**First, install the library:** +**1. Install the library:** ```bash $ pnpm install @chakra-ui/react @emotion/cache @emotion/react ``` -**Then, you should add the code to `vite.config.ts` for [Ignore unnecessary warnings](https://github.com/TanStack/query/pull/5161#issuecomment-1506683450)** +**2. You should add the code to `vite.config.ts` for [Ignore unnecessary warnings](https://github.com/TanStack/query/pull/5161#issuecomment-1506683450)**
vite.config.ts @@ -122,7 +122,7 @@ export default defineConfig({
-**Now, you can use Chakra UI in your project:** +**3. You can use Chakra UI in your project:**
src/pages/popup/Popup.tsx @@ -137,7 +137,11 @@ export default function Popup() {
-**If you want to use Chakra UI in the content script, you need to add the following code:** +--- + +> if you don't want to use Chakra UI in the content script, you can skip 4,5 step. + +**4. If you want to use Chakra UI in the content script, you need to add the following code:**
src/pages/content/ui/CustomChakraProvider.tsx @@ -233,7 +237,7 @@ export default function EmotionCacheProvider({ children, rootId }: { rootId: str
-**And, fix the `src/pages/content/index.tsx` file:** +**5. Fix the `src/pages/content/index.tsx` file:**
src/pages/content/index.tsx