styletron-vue
Version:
Vue bindings for styletron.
153 lines (105 loc) • 3.52 kB
Markdown
# styletron-vue
[](https://npmjs.com/package/styletron-vue) [](https://npmjs.com/package/styletron-vue) [](https://circleci.com/gh/egoist/styletron-vue/tree/master) [](https://github.com/egoist/donate)
> Vue bindings for [Styletron](https://github.com/rtsao/styletron).
## Install
```bash
yarn add styletron styletron-vue
```
CDN: [UNPKG](https://unpkg.com/styletron-vue/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/styletron-vue/dist/)
## Usage
Bind `styletron` instance to root Vue instance:
```js
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`:
<details><summary>in single-file component</summary><br>
```vue
<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>
```
</details>
<details><summary>in component with render function</summary><br>
```js
import { styled } from 'styletron-vue'
const StyledButton = styled('div', {
color: 'pink'
})
export default {
render() {
return <StyledButton>I am pink</StyledButton>
}
}
```
</details>
### Access Props
```js
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
```js
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](https://github.com/egoist/styletron-vue/issues/2).
## API
### styled(tag, styles, [props])
#### tag
Type: `string` `object`
String or component object.
#### styles
Type: `object` `function`
```js
// 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).
#### 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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/styletron-vue/contributors)).
> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)