@vue-emotion/styled v0.0.5

vue-emotion

Use dynamic styling powered by emotion with Vue.js components.

Demo Link

https://codesandbox.io/s/github/ParkerD559/vue-emotion-plugin/tree/master

Styled

Installation

npm install -D @vue-emotion/styled

Style Components

const StyledButton = styled(MyButton)`
  border: 1px solid ${color('red')};
  padding: 10px;
  height: ${props => props.height}px;
  width: ${props => props.width}px;
  color: ${props => props.color};
  background-color: ${props => props.backgroundColor};
`

Style HTML elements

const StyledAnchor = styled.a`
  text-decoration: none;
`

Target styled components

import StyledButton from './somewhere'

const StyledWrapper = styled.section`
  div > ${StyledButton} {
    color: #123123;
  }
`

Note: Doesn't work with object styles

Object styles

const StyledButton = styled(MyButton)({
    color: '#0000ff',
    flex: 1
})

Reuse styles using withComponent

const StyledButton = styled(MyButton)`
    height: 100px;
    width: 200px;
`
const StyledAnchor = StyledButton.withComponent('a');
// => StyledButton and StyledAnchor have same styles

Bugs/Features

Please feel free to post any issues or feature requests: https://github.com/ParkerD559/vue-emotion/issues