styletron-vue
Vue bindings for Styletron.
Install
yarn add styletron styletron-vue
Usage
Bind styletron
instance to root Vue instance:
Vue const styletron = // You can set `styletron` instance in any parent component options// Like in the root instance options styletron
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
const StyledButton = { return <StyledButton>I am pink</StyledButton> }
Access Props
// 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 = const PinkButton = // 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
When you're accessing props
, you actually have to provide the third arg: props.
props
Type: Array
object
Prop validation.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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