Dynamic styling in Vue.js

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:

<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:

<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:

<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:

<template>
  <button 
    :class="['my-button', {'warning': isWarning}]"
  >
    {{ text }}
  </button>  
</template>

and below in the style tag:

<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:

  computed: {
    classes () {
      return this.isWarning ? 'my-button warning' : 'my-button';
    }
  }

then we use the class binding we used above, passing only the computed value:

<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:

<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:

  computed: {
    cssVars () {
      return {
        '--button-bg-color': this.isWarning ? '#FC4' : '#CCC'
      }
    }
  }

and finally we add style binding to the button tag:

<template>
  <button 
    class="my-button"
    :style="cssVars"
  >
    {{ text }}
  </button>
</template>

#5 Styled-components

Styled-components 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, please note that it's compatible only with Vue 2.x.

Install the package (using yarn as the package manager):

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:

import styled from 'vue-styled-components';

then we define the component (a styled button) and its property isWarning:

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:

....
  components: {
    MyButton
  }
...

<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 through 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!