Global styles

Panache is component scoped by design but sometimes it can be helpful to add global styles such as resets or base styles.

You can use the helper function createGlobalStyle to do this. It works like the regular component creator and you have access to your theme, media and other props in the same way.

import { createGlobalStyle } from 'panache-react'

const GlobalStyle = createGlobalStyle(({ theme }) => ({
  html: {
    fontSize: '20px',
    fontFamily: theme.fonts.primary
  },
}))

Then add the GlobalStyle at the top of your app tree, but inside your provider.

<PanacheProvider theme={theme} media={media}>
  <GlobalStyle />
  <App />
</PanacheProvider>

Reset CSS

Panache has a helper package with a CSS reset based on Eric Meyers famous file, but formatted as a Style Object. To use the reset first install the package:

# with npm
npm install --save panache-reset

# with yarn
yarn add panache-reset

Then import and pass the reset to createGlobalStyle as the second argument. This will merge the reset with your own global styles. Your styles will take precedent if you target the same selector and CSS property.

import { createGlobalStyle } from 'panache-react'
import reset from 'panache-reset'

const globalStyles = ({ theme }) => ({
  html: {
    fontSize: '20px',
    fontFamily: theme.fonts.primary
  },
})

const GlobalStyle = createGlobalStyle(globalStyles, reset)

If you prefer another reset you can also pass in your own as long as it's formatted as a Style Object.