A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/psongpin/stitches-normalize-css below:

psongpin/stitches-normalize-css: Normalize CSS for stitches

Normalize CSS for stitches.

Demo on CodeSandbox.

yarn add stitches-normalize-css

or

npm install stitches-normalize-css

Adding normalize or opinionated to globalCss

Normalize CSS rules here

Opinionated CSS rules here

import * as React from 'react'
import { normalize } from 'stitches-normalize-css'
// if you want to use the opinionated one, import opinionated instead of normalize
// import { opinionated } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

// path-to/stitches.config.js - Sample stitches config
/*
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  theme: {
    colors: {
      gray400: 'gainsboro',
      gray500: 'lightgray',
    },
  },
  media: {
    bp1: '(min-width: 480px)',
  },
})
*/

const globalStyles = globalCss(...normalize)

const App: React.FC = () => {
  globalStyles()
  return <div>App</div>
}
Adding custom global styles on top of normalize
import * as React from 'react'
import type * as Stitches from '@stitches/react';
import { normalize } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

const customGlobalStyles: Record<string, Stitches.CSS> = {
  ".App": {
    backgroundColor: "papayawhip"
  },
  body: {
    border: "2px solid red",
    minHeight: "100vh"
  }
};

const globalStyles = globalCss(...normalize, customGlobalStyles);

const App: React.FC = () => {
  globalStyles()
  return <div className="App">App</div>
}

All credit goes to CSS Tools for Normalize CSS.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4