CSS-normalize library for styled-components.
The original normalize.css is pulled from necolas/normalize.css, and parsed into styled ready format.
npm install --save styled-normalizeyarn add styled-normalizePackage exported normalize and Normalize. Normalize is a component with global styles. normalize is a css-normalize content to interpolate into styled component.
Use as component:
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Normalize } from 'styled-normalize'
import { App } from './app'
const Root = () => (
<React.Fragment>
<Normalize />
<App />
</React.Fragment>
)
ReactDOM.render(<Root />, document.querySelector('#root'))Also you can use createGlobalStyle API:
// styles/index.js
import { createGlobalStyle } from 'styled-components'
import { normalize } from 'styled-normalize'
export const GlobalStyle = createGlobalStyle`
${normalize}
// You can continue writing global styles here
body {
padding: 0;
background-color: black;
}
`
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { GlobalStyle } from './styles'
import { App } from './app'
const Root = () => (
<React.Fragment>
<GlobalStyle />
<App />
</React.Fragment>
)
ReactDOM.render(<Root />, document.querySelector('#root'))You can also use named imports:
// ES Modules
import { normalize, Normalize } from 'styled-normalize'
// CommonJS
const { normalize, Normalize } = require('styled-normalize')If you want to use styled-normalize with styled-components@v3 you should use prev npm tag.
npm install styled-normalize@prevv3 don't supports
createGlobalStyleAPI.
NO SEMVER!
Why? Because X.Y numbers in vX.Y.Z version matches X.Y in normalize.css
The MIT License
