alexandrebonaventure / styletron-vue

Vue bindings for Styletron.

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'
}))

Styled Component

const Button = styled('button', {
  color: 'red'
})

const PinkButton = styled(Button, {
  color: 'pink'
})

Theming

Check out discussion here.

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).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin