In vue.js component, how to use props in css?

Question

I'm new to vue.js. Here is my problem:

In a *.vue file like this:

<template>   <div id="a">   </div> </template>  <script>   export default {     name: 'SquareButton',     props: ['color']   } </script>  <style scoped>     #a {       background-color: ?     } <style> 

How can I use the props color in background-color: (where is a ? now).

Thanks.

Answer 1

You actually can!

You should define the CSS variables in a Computed Property, then call the computed property as a style attribute to the element that will require the CSS variable, and finally you may use the variable within the tags at the bottom of your document.

new Vue({    el: '#app',    data: function() {      return {        baseFontSize: 1,        bgHoverColor: "#00cc00",        hoverContent: "Hovering!"      }    },    computed: {      cssProps() {        return {          '--hover-font-size': (this.baseFontSize * 2) + "em",          '--bg-hover-color': this.bgHoverColor,          '--hover-content': JSON.stringify(this.hoverContent)        }      }    }  })

div {    margin: 1em;  }    div.test:hover {    background-color: var(--bg-hover-color);    font-size: var(--hover-font-size);  }    div.test:hover::after {    margin-left: 1em;    content: var(--hover-content);  }

<script src="https://unpkg.com/vue/dist/vue.js"></script>    <div id="app" :style="cssProps">      <div>Hover text: <input type="text" v-model="hoverContent"></div>    <div>Hover color: <input type="color" v-model="bgHoverColor"></div>      <div class="test">Hover over me</div>  </div>

Or have a look here: https://codepen.io/richardtallent/pen/yvpERW/
And here: https://github.com/vuejs/vue/issues/7346