https://github.com/sergeysova/styled-normalize

normalize.css for styled-components
https://github.com/sergeysova/styled-normalize

css normalize react styled styled-components

Last synced: 1 day ago
JSON representation

normalize.css for styled-components

• Host: GitHub
• URL: https://github.com/sergeysova/styled-normalize
• Owner: sergeysova
• License: mit
• Created: 2017-01-23T11:54:37.000Z (about 8 years ago)
• Default Branch: main
• Last Pushed: 2024-02-08T13:08:14.000Z (12 months ago)
• Last Synced: 2025-01-28T10:07:52.020Z (5 days ago)
• Topics: css, normalize, react, styled, styled-components
• Language: JavaScript
• Homepage: https://npmjs.com/styled-normalize
• Size: 351 KB
• Stars: 447
• Watchers: 6
• Forks: 19
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# styled-normalize

CSS-normalize library for [styled-components](https://styled-components.com/).

The original `normalize.css` is pulled from [necolas/normalize.css](https://github.com/necolas/normalize.css), and parsed into styled ready format.

## Usage

```sh

npm install --save styled-normalize

```

```sh

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:

```js

// index.js

import React from 'react'

import ReactDOM from 'react-dom'

import { Normalize } from 'styled-normalize'

import { App } from './app'

const Root = () => (

  

    

    

  

)

ReactDOM.render(, document.querySelector('#root'))

```

Also you can use [`createGlobalStyle`](https://www.styled-components.com/docs/api#createglobalstyle) API:

```js

// 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 = () => (

  

    

    

  

)

ReactDOM.render(, document.querySelector('#root'))

```

You can also use named imports:

```js

// 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.

```bash

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](LICENSE)