https://github.com/jschr/react-style-side-effect
React components to style html, body and root app elements.
https://github.com/jschr/react-style-side-effect
Last synced: about 2 months ago
JSON representation
React components to style html, body and root app elements.
- Host: GitHub
- URL: https://github.com/jschr/react-style-side-effect
- Owner: jschr
- Created: 2016-09-21T16:29:04.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-22T18:21:50.000Z (almost 10 years ago)
- Last Synced: 2025-01-11T20:32:27.953Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Style Side Effect
=========================
[](https://www.npmjs.com/package/react-style-side-effect)
Declaritvely style elements that exist outside of the React tree. Works great with css-in-js libraries such as:
- [aphrodite](https://github.com/Khan/aphrodite)
## Installation
```
npm install --save react-style-side-effect
```
## Basic Usage
```js
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 (
...
)
}
```
## Usage with Aphrodite
```js
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 (
...
)
}
```