/ Gists / Props to css styles
On gists

Props to css styles

Vue.js

component.vue Raw #

 <HelloWorld color="red" bg="green" />

<template>
  <div :style="cssProps">KUK</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['color', 'bg'],
  computed: {
    cssProps() {
      return {
        '--color': this.color,
        '--bg': this.bg,
      };
    },
  },
};
</script>

<style scoped>
div {
  color: var(--color);
  background: var(--bg);
}
</style>