By April 22, 2022

Statically typed theme in EmotionJS

Share article

When designing a frontend application it is important to think ahead about styling. There are many approaches to style a web app, but I would like to introduce you to my favorite one— EmotionJS 👩‍🎤 working under TypeScript watch.

Photo by Robert Katzki on Unsplash

What’s that for?

At TDSOFT.com 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.

But this setup will be a great Developer Experience boost for you in any type of project.

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.

To create a typed theme instance, you have to create an “emotion.d.ts” file in your project root directory and setup it as follows:

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

You can read more about emotion in the great documentation page they have: https://emotion.sh/

Share article
Blog
By March 31, 2022

3 things that make people truly enjoy their work

Ever wondered what is it that makes people truly enjoy their everyday working life? This article might give you some answers.

3 things that make people truly enjoy their work
By April 01, 2022

My 4 tips for Junior Developer candidates

The number of people trying to land a job in the IT world implies a need for you to stand out and attract the recruiter’s eye.

My 4 tips for Junior Developer candidates
Get to know us better!
See our Facebook pageDBBF0ADC-A289-423A-B67D-7695784CCC0C
TDSOFT - Think Future Play
2022, All rights reserved