How to use the preact-fela.createComponent function in preact-fela

const center = props => ({
  padding: 10,
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center',
  flexDirection: 'column',
  flex: props.flex || 1,
  fontFace: {
    fontFamily: 'Lato',
    src: [
      'https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff'
    ]
  }
})

export default createComponent(center)

import { createComponent } from 'preact-fela'

const info = () => ({
  padding: 5,
  fontSize: '20px',
  color: 'gray',
  flexDirection: 'column'
})

export default createComponent(info)

color: 'rgb(50, 50, 50)',
  fontSize: 100,
  padding: 50,
  ':hover': { animationDuration: '500ms' },
  '@media (max-width: 800px)': { fontSize: '40px' },
  animationDuration: '2s',
  animationIterationCount: 'infinite',
  animationName: {
    '0%': { color: 'green' },
    '50%': { color: 'blue' },
    '80%': { color: 'purple' },
    '100%': { color: 'green' }
  }
})

export default createComponent(rule, Header, ['title'])

import { createComponent } from 'preact-fela'

const label = props => ({
  fontSize: props.size,
  lineHeight: '200px',
  padding: 20
})

export default createComponent(label)