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.
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:
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:
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;
}
`
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:
import { normalize, Normalize } from 'styled-normalize'
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