Emotion and Tanststack Start
Have someone have successfully manage to configure emotion base framework like material-ui with tankstack Start ?
Bae on the documentation https://mui.com/material-ui/guides/server-rendering/ we need to
ReactDOMServer.renderToString the whole component on the server and extract/build the css and inject it into the meta tag. Here are express (https://github.com/mui/material-ui/tree/v6.x/examples/material-ui-express-ssr) and remix (https://github.com/mui/material-ui/tree/v6.x/examples/material-ui-remix-ts) configuration... I dont see a way within ssr.tsx to renderToString the whole page.... any suggestion?Server rendering - Material UI
The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests your app.
GitHub
material-ui/examples/material-ui-express-ssr at v6.x · mui/material...
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
GitHub
material-ui/examples/material-ui-remix-ts at v6.x · mui/material-ui
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
13 Replies
genetic-orange•7mo ago
GitHub
Document how to use
emotion/@mui/material/@mui/joy with Start...Which project does this relate to? Start Describe the bug SSR with @mui/material/@mui/joy worked flawlessly without any special setup for @tanstack/start <= 1.81.11. Starting with 1.81.12 hydrat...
absent-sapphire•7mo ago
I literally migrated to tailwind for this reason
I wrote a bunch of components with Tailwind, DaisyUI that mirror MUI
so I could hot-swap
absent-sapphire•7mo ago
FYI => https://github.com/emotion-js/emotion/pull/3289
tl:dr - chatted back and forth with maintainer, not going to support anytime soon due to underlying issues with React API + emotion (they are working with React team to resolve).
GitHub
Version Packages (next) by github-actions[bot] · Pull Request #3289...
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're ...
absent-sapphire•7mo ago
also I wanted to note, I DID get it working but it was injecting the style tags after the face aka causing flashing and hurtin perf which I coudl NOT do for our public/marketing site. I still use MUI on our backend that is SPA only
backend meaning our webapp/admin
fascinating-indigoOP•7mo ago
yes. it does not work for ssr. only client side
absent-sapphire•7mo ago
correct ☝️
you can def get it to render but only if you don't care about SSR or perf
I was scoring in the 50s on lighthouse cause of it so just completely removed
other idea if using MUI is try PigmentCSS but thats pretty new and I've not tested
fascinating-indigoOP•7mo ago
I am too dependent of mui, cant really migrate from nextjs to tanstack/start without mui. Will try the pigmentcss
absent-sapphire•7mo ago
If that works please share as I'd love to figure it out too for my webapp or I'm going to need to rollup my MUI-api compatible tailwind components into a lib lol
fascinating-indigoOP•7mo ago
hey @Zac it did not work, was giving weird issue from the get-go. might be a skill issue on my part. but i am stuck with mui and nextjs, cant afford to replace all the ui
extended-salmon•7mo ago
For us the setup I've documented within https://github.com/TanStack/router/issues/2867#issuecomment-2541019127 works just fine, even for SSR. Did you follow my pattern in that comment?
genetic-orange•7mo ago
we should add an official emotion example to our repo. would be great if you could create one!
extended-salmon•7mo ago
fascinating-indigoOP•7mo ago
this made the difference!!! awesome! cc @Zac