stitches-normalize-css
Normalize CSS for stitches.
Installation:
yarn add stitches-normalize-css
or
npm install stitches-normalize-css
Usage:
normalize
or opinionated
to globalCss
Adding 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>
}
normalize
Adding custom global styles on top of 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>
}
Credits
All credit goes to CSS Tools for Normalize CSS.