styletron-vue

Vue bindings for Styletron.

Install

yarn add styletron styletron-vue

CDN: UNPKG | jsDelivr

Usage

Bind styletron instance to root Vue instance:

import StyletronVue from 'styletron-vue'
import Styletron from 'styletron'
import MyApp from './MyApp.vue'

Vue.use(StyletronVue)

const styletron = new Styletron()

// You can set `styletron` instance in any parent component options
// Like in the root instance options
new Vue({
  styletron,
  render: h => h(MyApp)
})

Then use styletron-vue:

in single-file component

<template>
  <div>
    <styled-button>I am pink</styled-button>
  </div>
</template>

<script>
import { styled } from 'styletron-vue'

const StyledButton = styled('div', {
  color: 'pink'
})

export default {
  components: {
    StyledButton
  }
}
</script>

in component with render function

import { styled } from 'styletron-vue'

const StyledButton = styled('div', {
  color: 'pink'
})

export default {
  render() {
    return <StyledButton>I am pink</StyledButton>
  }
}

Access Props

styled('div', props => ({
  color: props.dark ? '#000' : '#fff'
}), ['dark']) // Specify the `props` as the third arg

// You can do any prop validation here, see:
// https://vuejs.org/v2/guide/components.html#Prop-Validation
// It's required if you want to access props

Styled Component

const Button = styled('button', props => ({
  color: props.dark ? 'darkred' : 'red'
}), ['dark'])

const PinkButton = styled(Button, props => ({
  color: props.dark ? 'darkpink' : 'pink'
}))
// Props will also be inherited
// So you don't need to define it again

Theming

Check out discussion here.

API

styled(tag, styles, [props])

tag

Type: string object

String or component object.

styles

Type: object function

// props: component props
// ctx: `ctx` of this functional component
styled(tag, (props, ctx) => ({}))

When you're accessing props, you actually have to provide the third arg: props.

props

Type: Array object

Prop validation.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

styletron-vue © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily