@normalize-in-js/styled-components v0.2.1

Normalize in JS - Styled Components

Installation

Yarn

yarn add @normalize-in-js/styled-components

NPM

npm install @normalize-in-js/styled-components

Usage

Normalize

import { Normalize } from '@normalize-in-js/styled-components';

function App() {
  return <Normalize />;
}

Reset

import { Reset } from '@normalize-in-js/styled-components';

function App() {
  return <Reset />;
}

Sanitize

import {
  Sanitize,
  SanitizeTypography,
  SanitizeForms,
  SanitizePage,
} from '@normalize-in-js/styled-components';

function App() {
  return (
    <>
      <Sanitize />
      <SanitizeTypography />
      <SanitizeForms />
      <SanitizePage />
    </>
  );
}

Preflight

import { Preflight } from '@normalize-in-js/styled-components';

function App() {
  return <Preflight />;
}

With Config

import { createPreflightStyle } from '@normalize-in-js/styled-components';

const CustomPreflight = createPreflightStyle({
  fontFamilySans: `"Comic Sans MS", cursive, sans-serif`,
  fontFamilyMono: `"Lucida Console", Monaco, monospace`,
  borderColor: 'rebeccapurple',
});

function App() {
  return <CustomPreflight />;
}

With Theme

import { Preflight, normalizeTheme } from '@normalize-in-js/styled-components';
import { ThemeProvider } from 'styled-components';

function App() {
  return (
    <ThemeProvider
      theme={{
        [normalizeTheme]: {
          fontFamilySans: `"Comic Sans MS", cursive, sans-serif`,
          fontFamilyMono: `"Lucida Console", Monaco, monospace`,
          borderColor: 'rebeccapurple',
        },
      }}
    >
      <Preflight />
    </ThemeProvider>
  );
}

Theme Config