https://github.com/dparker2/vue-emotion

Use emotion with Vue.js
https://github.com/dparker2/vue-emotion

css-in-js emotion emotionjs styled styled-components vue-plugin vuejs vuejs2

Last synced: 11 months ago
JSON representation

Use emotion with Vue.js

• Host: GitHub
• URL: https://github.com/dparker2/vue-emotion
• Owner: dparker2
• License: mit
• Created: 2019-04-14T21:19:36.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-21T16:32:16.000Z (about 7 years ago)
• Last Synced: 2025-07-02T14:07:49.693Z (12 months ago)
• Topics: css-in-js, emotion, emotionjs, styled, styled-components, vue-plugin, vuejs, vuejs2
• Language: JavaScript
• Homepage:
• Size: 716 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-emotion

[![npm version](https://badge.fury.io/js/%40vue-emotion%2Fstyled.svg)](https://badge.fury.io/js/%40vue-emotion%2Fstyled)

[![Build Status](https://travis-ci.org/ParkerD559/vue-emotion.svg?branch=master)](https://travis-ci.org/ParkerD559/vue-emotion)

[![Coverage Status](https://coveralls.io/repos/github/ParkerD559/vue-emotion/badge.svg?branch=master)](https://coveralls.io/github/ParkerD559/vue-emotion?branch=master)

Use dynamic styling powered by [emotion](https://emotion.sh/docs/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

```javascript

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

```javascript

const StyledAnchor = styled.a`

  text-decoration: none;

`

```

## Target styled components

```javascript

import StyledButton from './somewhere'

const StyledWrapper = styled.section`

  div > ${StyledButton} {

    color: #123123;

  }

`

```

*Note: Doesn't work with object styles*

## Object styles

```javascript

const StyledButton = styled(MyButton)({

    color: '#0000ff',

    flex: 1

})

```

## Reuse styles using withComponent

```javascript

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