Emotion
Kye Hohenberger’in 2017’de çıkardığı CSS-in-JS kitaplığı. styled-components’in yaygınlaştırdığı styled.div API’sini ve daha esnek bir css prop’unu birlikte sunar.
styled-components’ten ana farkı, bileşenleri sarmalamadan kullanılabilmesidir: Babel ya da JSX pragma’sı sayesinde <div css={{ color: 'red' }}> yazılabilir. Sınıf adlarını stilin özetinden üretir, kopyaları kendiliğinden ayıklar, sunucu tarafı oluşturmayı ve tema nesnelerini destekler. MUI, v5’te Emotion’a geçti; bu da onu, pek az kişi bilinçli seçmeden React dünyasında en çok kurulan stil kitaplıklarından biri yaptı. Dezavantajı tüm çalışma zamanı CSS-in-JS çözümlerininkiyle aynıdır: stiller tarayıcıda hesaplanır, bu da zaman kaybettirir ve React Server Components ile çatışır. Tailwind’e ve vanilla-extract gibi sıfır çalışma zamanlı alternatiflere kayış bu yüzdendir.