This content originally appeared on DEV Community and was authored by Edoardo Cordani
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 style
Ahh, this is the technique I like the most 😀 . We start defining a classes computed value that returns a string of CSS class names based on the component property isWarning value:
computed: {
classes () {
if (this.isWarning) {
return 'my-button warning';
}
return 'my-button';
}
}
then we use the class binding we used above, passing only the computed value:
<template>
<button :class="classes">
{{ text }}
</button>
</template>
#4 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 in 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!
This content originally appeared on DEV Community and was authored by Edoardo Cordani
Edoardo Cordani | Sciencx (2021-10-11T13:26:57+00:00) Dynamic styling in Vue.js. Retrieved from https://www.scien.cx/2021/10/11/dynamic-styling-in-vue-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.