styled-normalize

What is styled-normalize?

The styled-normalize package is a utility for applying a CSS normalization stylesheet using styled-components. It helps to ensure consistent styling across different browsers by resetting default browser styles.

What are styled-normalize's main functionalities?

CSS Normalization

This feature allows you to apply a CSS normalization stylesheet globally in your application using styled-components. It resets default browser styles to ensure consistency across different browsers.

import { createGlobalStyle } from 'styled-components';
import normalize from 'styled-normalize';

const GlobalStyle = createGlobalStyle`
  ${normalize}
`;

export default GlobalStyle;

Other packages similar to styled-normalize

normalize.css

normalize.css is a popular CSS library that provides cross-browser consistency in the default styling of HTML elements. Unlike styled-normalize, which is designed to be used with styled-components in a React environment, normalize.css can be used in any web project by including the CSS file.

sanitize.css

sanitize.css is a CSS library that provides a more opinionated reset compared to normalize.css. It aims to make browsers render elements more consistently and in line with modern standards. Like normalize.css, it is not tied to styled-components and can be used in any web project.

reset-css

reset-css is a simple CSS reset library that removes all default browser styling. It is less comprehensive than normalize.css and sanitize.css but can be useful for projects that require a minimal reset. It is also not tied to styled-components and can be used in any web project.

README

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