Emotion

The main difference from styled-components is that Emotion can be used without wrapping components: <div css={{ color: 'red' }}> via a Babel or JSX pragma. It generates class names from a hash of the style, deduplicates automatically, supports server-side rendering and theme objects. MUI switched to Emotion in v5, which made it one of the most installed styling libraries in the React world without many people actively choosing it. The downside is the same as for all runtime CSS-in-JS: styles are computed in the browser, which costs time and clashes with React Server Components. Hence the drift toward Tailwind and zero-runtime alternatives like vanilla-extract.