one-styled

Vue styled components

Install

npm install one-styled

Usage

import Vue from 'vue'
import OneStyled from 'one-styled'
import { createRenderer } from 'fela'

Vue.use(OneStyled, {
  renderer: createRenderer(// fela options),
  // optional theme object
  theme: {
    primary: 'dodgerblue',
  },
})

Create component

The 'one' function takes 3 arguments.

import { one } from 'one-styled'

const UIBtn = one('button', () => ({ color: 'red' }))

const UIBtnLarge = one(Btn, () => ({ height: '48px' }))

1. A tag name (String) or another component created with 'one' to extend on

2. A function that returns a Fela rule object

3. Vue props definitions (Optional)

import { one } from 'one-styled'

export default one(
  'button',
  ({ primary, theme }) => ({
    color: primary ? theme.primary : 'red',
  }),
  {
    primary: Boolean,
  }
)