CODEWITHSUNDEEP
reactjsmaterial-uicss-in-jsvanilla-extract
panepeter
panepeter

Reputation: 4252

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

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:

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.

Upvotes: 24

Views: 2075

Answers (2)

Pavel S
Pavel S

Reputation: 41

If your main concern is build time css, you can try to use PigmentCSS instead of vanilla extract.

Blog: https://mui.com/blog/introducing-pigment-css/

Migration: https://next.mui.com/material-ui/migration/migrating-to-pigment-css/

(This could have been comment but I do not have enough reputation)

Upvotes: 1

Ashu Sahu
Ashu Sahu

Reputation: 609

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.

Upvotes: -4

Related Questions