💅 styled-reset-advanced

Extended version of reset.css for styled-components adding border-box reset,
as well as additional link/button resets, font antialiasing, focused user-select, etc.

Also see styled-reset from Zac Anger and styled-normalize from Sergey Sova.

Installation

With NPM: npm i styled-reset-advanced (use the -S flag if you're on npm 4 or earlier).
With Yarn: yarn add styled-reset-advanced.

Usage

import React, { Fragment } from 'react';
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset-advanced';

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */
`;

const App = () => (
  <Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </Fragment>
);

export default App

If you're using Styled Components version 3.x or 2.x, you'll need to use the injectGlobal api instead:

import { injectGlobal } from 'styled-components';
import reset from 'styled-reset';
injectGlobal`
  ${reset}
`;

reset is also available as a named export:

import { reset } from 'styled-reset-advanced';

Credits

Credit goes to Eric Meyer for coming up with reset.css, Paul Irish for box model reset and Zac Anger for coming up with initial version of Styled Reset. Reset.css is public domain (unlicensed).

License

Licensed under MIT license.