In vue.js component, how to use props in css?
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
You don't. You use a computed property and there you use the prop to return the style of the div, like this:
<template> <div id="a" :style="style" @mouseover="mouseOver()"> </div></template><script> export default { name: 'SquareButton', props: ['color'], computed: { style () { return 'background-color: ' + this.hovering ? this.color: 'red'; } }, data () { return { hovering: false } }, methods: { mouseOver () { this.hovering = !this.hovering } } }</script><style scoped><style>
As we are in 2020 now, I suggest using this trick with a css function called var
<template> <div id="a" :style="cssVars"></div></template><script>export default { props: ['color'], computed: { cssVars () { return{ /* variables you want to pass to css */ '--color': this.color, } }}<script><style scoped>#a{ background-color: var(--color);}</style>This method is very useful because it allows you to update the passed values through css later on (for example when you apply hover event).