NewsKit exports out some of the most commonly used Emotion functions/types/components to help consumers build custom components where needed.
The css function in Emotion accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.
The primary way to style elements with emotion is the
css prop. It provides a concise and flexible API to style your components.
styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled.
styled is very similar to
css except you call it with an HTML tag or React component and then call that with a template literal for string styles or a regular function call for object styles.
styled in both the components and the documentation site. Here is the official Emotion documentation for Styled Components.
css prop accepts object styles (
CSSObject) directly and does not require an additional import. Object styles (
CSSObject) are especially useful with the css prop because you don’t need a css call like with string styles.
Object styles can also be used with
styled. Here is the official Emotion documentation for Object Styles
To pass string styles(
SerializedStyles), you must use css which is exported by @emotion/core, it can be used as a tagged template literal.
Here is the official Emotion documentation for String Styles.
Global component (
Global) injects styles into the global scope and is useful for applications such as css resets or font faces.
It accepts a styles prop which accepts the same values as the css prop except it inserts styles globally. Global styles are also removed when the styles change or when the Global component unmounts.
In NewsKit, we use
Global to apply font faces to our documentation site pages. Here is the official Emotion documentation for Global Styles.
Theming is included in the @emotion/react package. Emotion's theming API provide us with
useTheme, which are widely used in NewsKit components and the documentation site.
You can read about their usage here or on Emotion's official documentation site Theming.