19

Some background

Our team has been using Material-UI (MUI) for quite some time, and we love it. With the release of MUI 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

MUI, 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.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
panepeter
  • 3,224
  • 1
  • 29
  • 41
  • 1
    Have you found any solution? I'm also interested in this problem. – NearHuscarl Oct 04 '21 at 04:41
  • 2
    Sadly, nope. Really not happy with MUI+Emotion though, so I think I'll take the time sooner or later to figure something out. Not before mid-October though. I'll definitely let you know if I have something working. – panepeter Oct 04 '21 at 12:58
  • Great question! As it is now end of November - are there any updates on your side? – knoefel Nov 21 '21 at 15:09
  • Sadly, no. Emotion is still bothering me, but I haven't found the time to act upon it. I'll most definitely post here if I have something working. – panepeter Nov 23 '21 at 09:39
  • @panepeter Pinging for an update. Vanilla Extract is quite appealing, but the lack of MUI support is worrisome. – Jarrod Jul 12 '22 at 04:46
  • Hi, have you found any solution with this? – mupinnn Oct 11 '22 at 10:28

1 Answers1

-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.

Ashu Sahu
  • 417
  • 6
  • 7