In terms of speed, JSS edges out Emotion slightly for static styles (those not based on props). However, when it comes to dynamic styles, Emotion takes the lead as it performs similarly well for both static and dynamic styles.
For more detailed insights into the performance discrepancy between JSS and Emotion with static styles, refer to the following discussions:
JSS clocked in at approximately 10% faster than Emotion for static styles. But when it came to dynamic styles, JSS lagged behind Emotion by 6 times, leading the Material-UI team to rule out JSS from the roster of styling engines for version 5.
The documentation found at https://next.material-ui.com/system/basics/#the-sx-prop outlines the performance metrics below:
| Benchmark case |
Code snippet |
Time normalized |
| a. Render 1,000 primitives |
<div className="…">
|
100ms |
| b. Render 1,000 components |
<Div> |
120ms |
| c. Render 1,000 styled components |
<StyledDiv> |
160ms |
| d. Render 1,000 Box |
<Box sx={…}> |
370ms |
Directly using Emotion (via the styled method or the css prop) should align closely with Benchmark case c. The use of makeStyles for static styles may offer a slight pace advantage (around 140ms to 150ms), but not significantly. While the sx prop exhibits slower results, its added overhead amounts to only one-fifth of a millisecond per component rendered for 1,000 elements. This variance hinges on the number of CSS properties passed through the sx prop, where fewer properties (< 5) diminishes the difference observed between styled and sx.
While there are no explicit claims by Material-UI that v5 surpasses v4 in overall swiftness, v5 introduces numerous new features that maintain comparable styling efficiency to v4, despite leveraging dynamic styles. This inclusive approach allows for the addition of new functionalities without sacrificing styling performance.
A drawback of utilizing makeStyles within Material-UI v5 is the simultaneous bundling of JSS and Emotion, potentially increasing bundle size. For existing v4 applications transitioning to v5 with established usage of makeStyles, an alternative option like tss-react mirrors the syntax of makeStyles, albeit supported by Emotion and offering akin performance levels to the styled API. Additionally, a codemod now exists for migrating JSS styles to tss-react.
Related answer: Why is the `sx` prop so much slower?