Comments (3)
Hello again!
I described my solution for this problem in this blog post. Here's a summary in case someone is reading it here 😄
TLDR:
- copy paste the two files below
- make sure your
<CacheProvider />
component imports your emotion cache from the new place - remove
gatsby-plugin-material-ui
from yourgatsby-node.js
file if you had it
./src/theme/cache.js
:
import createCache from '@emotion/cache';
/** @type {import('@emotion/cache').Options} */
export const cacheProps = {
key: 'mui',
prepend: true,
};
/** @type {import("@emotion/cache").EmotionCache | undefined} */
export let muiCache;
export const makeMuiCache = () => {
if (!muiCache) {
muiCache = createCache(cacheProps);
}
return muiCache;
};
./gatsby-srr.js
:
import { CacheProvider } from '@emotion/react';
import createEmotionServer from '@emotion/server/create-instance';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { getTssDefaultEmotionCache } from 'tss-react';
import { makeMuiCache } from './src/theme/cache';
/** @param {import('gatsby').ReplaceRendererArgs} args */
export const replaceRenderer = (args) => {
const { bodyComponent, replaceBodyHTMLString, setHeadComponents } = args;
const muiCache = makeMuiCache();
const { extractCriticalToChunks } = createEmotionServer(muiCache);
const emotionStyles = extractCriticalToChunks(
renderToString(
<CacheProvider value={muiCache}>{bodyComponent}</CacheProvider>
)
);
const muiStyleTags = emotionStyles.styles.map((style) => {
const { css, key, ids } = style || {};
return (
<style
key={key}
data-emotion={`${key} ${ids.join(` `)}`}
dangerouslySetInnerHTML={{ __html: css }}
/>
);
});
const tssCache = getTssDefaultEmotionCache();
const { extractCritical } = createEmotionServer(tssCache);
const { css, ids } = extractCritical(renderToString(bodyComponent));
const tssStyleTag = (
<style
key="tss-styles"
data-emotion={`css ${ids.join(' ')}`}
dangerouslySetInnerHTML={{ __html: css }}
/>
);
const combinedStyleTags = [...muiStyleTags, tssStyleTag];
setHeadComponents(combinedStyleTags);
// render the result from `extractCritical`
replaceBodyHTMLString(emotionStyles.html);
};
Don't forget to delete the Gatsby Material UI plugin if you were using it!
./gatsby-config.js
:
module.exports = {
/* Your site config here */
plugins: [
`gatsby-plugin-material-ui`, // <-- delete me!
// ...rest plugins
],
// ...rest config
};
And that's it 😄
Thanks again for the help!
from tss-react.
Hey! Just wanted to say thanks a lot for the very quick help! :)
It took me a while but I finally solved the issue by combining the code snippet & blog post you posted with some code from the Gatsby Material UI plugin. Basically I had to copy paste most of that plugin into my own gatsby-ssr.js
file.
I will try to post my full solution here this weekend and then I think we can close this issue 😄
from tss-react.
Hi @Deckstar,
Maybe this can help:
import { getTssDefaultEmotionCache } from "tss-react";
const cache = getTssDefaultEmotionCache();
https://ntsim.uk/posts/how-to-add-vanilla-emotion-ssr-to-gatsby
Let me know if it help. Otherwise please share a sample project with me so I can test.
Best regards
from tss-react.
Related Issues (20)
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
- The right way typing props when using withStyles HOT 3
- Invalid type for withStyles HOT 4
- Mantine integration
- Using `@import` rule within `<GlobalStyles />` component HOT 8
- `GlobalStyles` create multiple <style data-emotion="css-global">...<style> HOT 1
- Cannot read properties of undefined (reading 'length') in useGuaranteedMemo HOT 3
- MUI V5: Performance issues HOT 4
- Prop `className` did not match. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.