jschr/react-style-side-effect

React components to style html, body and root app elements.

React Style Side Effect

Declaritvely style elements that exist outside of the React tree. Works great with css-in-js libraries such as:

• aphrodite

Installation

npm install --save react-style-side-effect

Basic Usage

import React from 'react'
import createStyleSideEffect from 'react-style-side-effect'

const HtmlStyle = createStyleSideEffect(document.docElement)
const BodyStyle = createStyleSideEffect(document.body)
const RootStyle = createStyleSideEffect(document.getElementById('root'))

export default function MyApp() {
  return (
    <HtmlStyle className='htmlClass'>
      <BodyStyle className='bodyClass'>
        <RootStyle className='rootClass'>
          ...
        </RootStyle>
      </BodyStyle>
    </HtmlStyle>
  )
}

Usage with Aphrodite

import React from 'react'
import { StyleSheet, css } from 'aphrodite'
import createStyleSideEffect from 'react-style-side-effect'

const HtmlStyle = createStyleSideEffect(document.docElement)

const styles = StyleSheet.create({
  html: {
    fontSize: '14px' // base font size for rem units
  }
})

export default function MyApp() {
  return (
    <HtmlStyle className={ css(styles.html) }>
      ...
    </HtmlStyle>
  )
}