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>
  )
}

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>
  )
}