Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
bin
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

styled-normalize

CSS-normalize library for styled-components.

The original normalize.css is pulled from necolas/normalize.css, and parsed into styled ready format.

Usage

npm install --save styled-normalize
yarn add styled-normalize

styled-components v4 / v5

Package 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')

styled-components v3

If you want to use styled-normalize with styled-components@v3 you should use prev npm tag.

npm install styled-normalize@prev

v3 don't supports createGlobalStyle API.

Version

NO SEMVER!

Why? Because X.Y numbers in vX.Y.Z version matches X.Y in normalize.css

License

The MIT License

You can’t perform that action at this time.