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