Dynamic styling in Vue.js
Tags: javascript, css, vue, webdev
Published: 2021-10-11 13:26:57

When I started using Vue.js as a front-end framework I immediately enjoyed the easy way I can set up and manage my components. Using single file components let me focus on all aspects regarding the way I build them: I simply need to put 3 tags inside a .vue file and I can start shaping both the visual aspect and all the logics behind the component itself. Talking about styling, the first thing that official doc tells you is how to style a component: simply insert a style tag (usually at the end of the file) and you're done. But when you move on and start to build complex interfaces, you immediately need to perform styling that goes beyond the simple composition of CSS classes.
So, during my journey, I discovered several ways to perform dynamic styling and this article aims to be a short reference for people that come up at first with this need.
In order to show you the different techniques, I'll use a super-simple button component that must use a specific background color value if a boolean prop is true (ok maybe is too simple, but so you'll grasp the concepts quickly).  
Let's start with the component code:

```html
<template>
  <button class="my-button">
    {{ text }}
  </button>  
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    },
    isWarning: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
}
</style>
``` 

and we call the component like so:
```html
<my-button text="Attention!" :is-warning="true"/>
```


### #1 Style binding
This is the simpler solution, just use Vue.js style binding and change the CSS background-color property:
```html
<template>
  <button 
    class="my-button"
    :style="{'background-color': isWarning ? '#FC4': '#CCC'}"
  >
    {{ text }}
  </button>  
</template>
```


### #2 Class binding
With class binding we append a specific class only if the prop `isWarning` is truthy:
```html
<template>
  <button 
    :class="['my-button', {'warning': isWarning}]"
  >
    {{ text }}
  </button>  
</template>
```
and below in the style tag:
```css
<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  &.warning {
    background-color: #FC4;
  }
}
</style>
```


### #3 Computed class
With this technique we simply define a `classes` computed value that returns a string of CSS class names based on the component property `isWarning` value:
```javascript
  computed: {
    classes () {
      return this.isWarning ? 'my-button warning' : 'my-button';
    }
  }
```
then we use the class binding we used above, passing only the computed value:
```html
<template>
  <button :class="classes">
    {{ text }}
  </button>
</template>  
```


### #4 Computed style with css variable
Ahh, this is the technique I like the most 😀 . It's a variant of the previous one but we use style binding and a css variable in order to change the background color.
Let's start using a css variable for `background-color` property:
```css
<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: var(--button-bg-color)
}
</style>
```
then we add a computed value that defines the final value of our `--button-bg-color` variable:
```javascript
  computed: {
    cssVars () {
      return {
        '--button-bg-color': this.isWarning ? '#FC4' : '#CCC'
      }
    }
  }
```
and finally we add style binding to the button tag:
```html
<template>
  <button 
    class="my-button"
    :style="cssVars"
  >
    {{ text }}
  </button>
</template>
```


### #5 Styled-components
 [Styled-components](https://styled-components.com/)  is a famous CSS-in-JS library used especially by React developers...and you can use it with Vue.js too 😉. You can find the package  [here](https://github.com/styled-components/vue-styled-components), please note that it's compatible only with Vue 2.x.  
Install the package (using yarn as the package manager):  
```console
yarn add vue-styled-components
```
Due to the simplicity of the component, we define it inside the parent component inside the `script` tag. First we must import the library:  
```javascript
import styled from 'vue-styled-components';
```
then we define the component (a styled button) and its property `isWarning`:   
```javascript
const btnProps = {
  isWarning: Boolean
}
const MyButton = styled('button', btnProps)`
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};
`;
```
Note the `background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};`, here we are telling the library to change the CSS property based on then prop `isWarning` value.  
Last step is to register the newly created component and use it inside the template:  
```javascript
....
  components: {
    MyButton
  }
...
```
```html
<my-button :is-warning="true">
  Attention!
</my-button>
```
Besides of styled-components library, there are also other CSS-in-JS libraries usable for Vue.js, for example [Emotion](https://emotion.sh/docs/introduction) through [vue-emotion](https://github.com/egoist/vue-emotion) package.

That's all, hope you find this article useful. If you know other techniques feel free to write me and I'll update the article!  
Thanks for reading!