Using vanilla-extract as the styling engine for Material-UI

Question

Some background

Our team has been using Material UI for quite some time, and we love it. With the release of Material UI v5, we took the time to check which styling solution we would use next since JSS is being abandoned by the MUI team.

We ended up following a discussion from the folks at Shopify. They made a very detailed comparison of styling solutions, and ended up with vanilla-extract as their tool of choice. Strong TypeScript support and, foremost, the zero-runtime-approach, got us convinced.

Sadly, vanilla-extract had not been considered by the MUI core team in their decision-making.

Question at hand

Material UI, according to their docs, enables the user to use various styling solutions. The styling engine used under the hood can be configured, as roughly described here.

Questions:

• is it (conceptually) possible and (pragmatically) reasonable to use vanilla-extract for:
  • styling MUI components?
  • using it as the style engine underlying MUI?
• where would sprinkles come into play?
• what would be the concrete steps for implementing this approach?
• has somebody done this already, and would be willing to share their code?

Contrary to common practice, I haven't really tried anything yet, implementation-wise. From my understanding, this would mean creating something along the lines of mui-styled-engine (wraps emotion) and mui-styled-engine-sc (wraps styled-components). Since that seemed pretty involved to me, I thought I'd ask first.

Answer 1

The detailed comparison you provided doesn't includes jss. But you can use jss directly without a setup from MUI. Use react-jss. I don't know about zero runtime thing but they also support typescript and will be easy for you to migrate your existing stylesheets written on MUI4. You just need to change the function names such as makeStyle to createUseStyles. Here is the whole doc - https://cssinjs.org/react-jss/?v=v10.9.0

I personally like jss because it helps to keep styles intact from the actual components. I have use it over MUI 5 provided styled engines and really much happy with the results.