Use React Specific Emotion Packages.

[azizhk]

Based on https://github.com/emotion-js/emotion/issues/1644#issuecomment-562492768

emotion package is framework agnostic. For usage with React, we have to use @emotion/core, @emotion/styled, create-emotion-server.

css function from emotion returns a string. css from @emotion/core returns a custom data type.

From: https://emotion.sh/docs/migrating-to-emotion-10 The most significant change in Emotion 10 is that it doesn’t let you easily access the underlying class names. Instead of thinking in class names, you have to think in terms of styles and composing them together (you can still use class names directly if you want to, but you won’t get new features like zero-config server rendering).

extractCritical is slower by its nature (extra work to be done), but it probably isn't slow enough for you to care about it. You can benchmark your case if you want to.

So for these reasons it's better to use the react specific packages @emotion/core, @emotion/styled

Now we are still using a few nested selectors where we use the classnames as strings. We need to phase those out soon.