Why build this?

Emotion (and CSS-in-JS libraries generally) make developing great components super fast - but what happens when you need to work with libraries that bake-in classnames or are using dangerouslySetInnerHTML ingested from somewhere else? This library solves all of your styling issues in these scenarios - so you can continue to use Emotion, and style uncontrolled HTML and components just like you would any other Emotion component.

What can I do with this?

• Get the styles from an existing Emotion-styled component as CSS text
• Apply styles from an existing Emotion-styled component to any DOM selector of your choosing

API

| Function Name | Description | Expects | Returns | | |-----------------------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---| | parseComponentToStyle | Take a single Emotion-themed component and return a string of CSS classes. | component: The component you'd like to extract styles from. toClassName (optional): replace the component's Emotion-generated classname with a classname of your choosing in the extracted rules. shouldUnmount (optional, default: true): control whether the generated React instance should still be available after styles are extracted. Useful for debugging. | All found CSS styles as a string. | | | applyComponentStylesToClass | Take a single Emotion-themed component, and apply its styles directly to a different class name. | component: The component you'd like to extract styles from. toClassName: replace the component's Emotion-generated classname with a classname of your choosing in the extracted rules. shouldUnmount (optional, default: true): control whether the generated React instance should still be available after styles are extracted. Useful for debugging. | No return | | | addRawCssToGlobalStyles | Add additional CSS styles globally to your document. Useful for adding additional styles/overriding Emotion styles. | rawCSS: Plain CSS text as a single string | No return | |