Use dynamic styling powered by emotion with Vue.js components.
https://codesandbox.io/s/github/ParkerD559/vue-emotion-plugin/tree/master
npm install -D @vue-emotion/styled
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};
`
const StyledAnchor = styled.a`
text-decoration: none;
`
import StyledButton from './somewhere'
const StyledWrapper = styled.section`
div > ${StyledButton} {
color: #123123;
}
`
Note: Doesn't work with object styles
const StyledButton = styled(MyButton)({
color: '#0000ff',
flex: 1
})
const StyledButton = styled(MyButton)`
height: 100px;
width: 200px;
`
const StyledAnchor = StyledButton.withComponent('a');
// => StyledButton and StyledAnchor have same styles
Please feel free to post any issues or feature requests: https://github.com/ParkerD559/vue-emotion/issues