This method is used for client-side only rendering. For universal rendering, we recommend using rehydrate.

Renders all cached styles into the DOM.
It also adds a change listener to automatically add newly rendered styles.


Argument Type Description
renderer Renderer The renderer providing the styles which are rendered to the DOM.


import { createRenderer } from 'fela'
import { render } from 'fela-dom'

const rule = props => ({
  backgroundColor: 'red',
  fontSize: props.size,
  color: 'blue'

const renderer = createRenderer()

renderer.renderRule(rule, { size: '12px' }) // => a b c


// automatically adds the rule to the stylesheet
renderer.renderRule(rule, { size: '15px '}) // => a d c

results matching ""

    No results matching ""