preact-fela basic usage

header.js

import {h} from 'preact'
import {style} from 'preact-fela-simple'

const Header = ({title, styles}) =>
  <header className={styles.container}>
    <h1 className={styles.title}>{title}</h1>
  </header>

const styles = ({theme, size}) => ({
  container: {
    textAlign: 'center',
    padding: '20px',
    height: '200px'
  },
  title: {
    lineHeight: 1.2,
    fontSize: size,
    color: theme.colors.primary
  }
})

export default style(styles)(Header)

index.js

import Preact, {h} from 'preact'
import {createRenderer} from 'fela'
import {Provider} from 'preact-fela-simple'
import Header from './header'

const renderer = createRenderer()

const theme = {
  colors: {
    primary: 'red'
  }
}

Preact.render((
  <Provider renderer={renderer} theme={theme}>
    <Header title="Hello world" size="17px" />
  </Provider>
), document.getElementById('root'))