Statically typed theme in EmotionJS

Photo by Robert Katzki on Unsplash

What’s that for?

At we are creating various B2B products which colours/fonts vary for each client. The EmotionJS with statically typed theme instances is a great fit for us for that use case.

Emotion ≤ 10

In order to create a typed styled instance, you have to use the CreateStyled utility type to which you pass your type definition. Then such type is asserted on regular styled utility imported from “@emotion/styled”. You can use exported customStyledInstance anywhere in your app and take advantage of your typed theme from now on.

Emotion ≥ 11 (ReactJS example)

In the newest EmotionJS release, the CreateStyled type has been replaced with TypeScript namespaces.

Key Benefits of using EmotionJS 👩‍🎤

  • Static analysis and IDE autocompletion at dev time
  • Easly reproductive theme system
  • Great developer experience with features such as source maps, labels, and testing utilities



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store