Vue bindings for Styletron.
yarn add styletron styletron-vue
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
:
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
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
Check out discussion here.
Type: string
object
String or component object.
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.
Type: Array
object
Prop validation.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
styletron-vue © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoist.moe · GitHub @egoist · Twitter @_egoistlily