emotion-sanitize

Sanitize.css ready to be used with Emotion CSS-in-JS API.

If you are wondering what the exact difference between Normalize.css and Sanitize.css is, you might find this comparison helpful.

For Normalize.css and Eric Meyer's Reset.css give these packages a try:

• emotion-normalize
• emotion-reset

Installation

yarn add emotion-sanitize

or

npm install emotion-sanitize --save

Emotion

Since emotion-sanitize version 12.0.0, we have a peer dependency to @emotion/react version >= 11.x.

For earlier versions of emotion-sanitize, use @emotion/core version 10.x.

Usage

As component

import React from 'react';
import ReactDOM from 'react-dom';
import { SanitizeCSS } from 'emotion-sanitize';

const App = () => (
  <React.Fragment>
    <SanitizeCSS assets forms sanitize typography />
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));

Component prop	Required	Type	Default value	Description
assets	no	boolean	false	Include assets.css global styles
evergreen	no	boolean	false	Include evergreen.css global styles
forms	no	boolean	false	Include forms.css global styles
formsEvergreen	no	boolean	false	Include forms.evergreen.css global styles
page	no	boolean	false	Include page.css global styles
reduceMotion	no	boolean	false	Include reduce-motion.css global styles
sanitize	no	boolean	true	Include sanitize.css global styles
typography	no	boolean	false	Include typography.css global styles

Custom

import React from 'react';
import ReactDOM from 'react-dom';
import { Global, css } from '@emotion/core';
import { assets, forms, sanitize, typography } from 'emotion-sanitize';

const App = () => (
  <React.Fragment>
    <Global 
        styles={css`
            ${assets}
            ${forms}
            ${sanitize}
            ${typography}

            // your own global styles here
        `} 
    />
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));

Version

Major and minor versions of emotion-sanitize correspond to the major and minor versions of sanitize.css.

Patch level reflects updates to emotion-sanitize.

License

MIT License