yarn add @leafygreen-ui/emotion
npm install @leafygreen-ui/emotion
This package should be used only in LeafyGreen components (i.e. @leafygreen-ui/*
packages).
For external applications, prefer using @emotion/react
(or similar), or an app-specific custom instance of Emotion.
Why? If any
@leafygreen-ui/*
dependencies are not up to date, this could cause multiple copies of@leafygreen-ui/emotion
to be installed, resulting in unpredictable styling.
Because we use a custom instance of Emotion to allow for styles defined in LeafyGreen to be easily overwritten, there's an additional step that must be taken to use our components when performing server-side rendering.
We expose three methods as named exports that are also exposed by the base emotion-server
package: renderStylesToString
, renderStylesToNodeStream
, and extractCritical
. You can find documentation on usage of each of the methods in the official Emotion documentation.
NOTE: If you are already server-side rendering an application using Emotion, you will use the methods exposed in
@leafygreen-ui/emotion
instead of, NOT in addition to the methods exposed byemotion-server
.
import { renderToString } from 'react-dom/server';
import { renderStylesToString } from '@leafygreen-ui/emotion';
import App from './App';
const html = renderStylesToString(renderToString(<App />));