Example app with emotion
This example features how to use emotion with Remix.
- app/
- styles/
- client.context.tsx
- createEmotionCache.ts
- server.context.tsx
- entry.client.tsx
- entry.server.tsx
- root.tsx
client.context.tsx
- Keeps the client context of styles and to reset based on the flush of Emotion styles sheets after every interaction into the state.createEmotionCache.ts
- Create an instance of Emotion cache.server.context.tsx
- Keeps the server context mounted onentry.server.tsx
with the Emotion sheets cache.entry.client.tsx
- Every time that styles update and be re-injected it sets the Emotion cache to a React state.entry.server.tsx
- Create the markup with the styles injected to serve on the server response.
Open this example on CodeSandbox:
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/routes/index.tsx
. The page auto-updates as you edit the file.
dev
: runs your application onlocalhost:3000
build
: creates the production build versionstart
: starts a simple server with the build production code