How can I use data in css with Vue? - css

Question

I want to design a button component with Vue.
When I get main props, how can I get in css --mainColor variable without setting inline-style? thanks.
<script>
import Vue from "vue";
export default Vue.extend({
name: "Button",
props: {
text: {
type: String,
default: ""
},
main: {
type: String,
default: "#10b981"
}
}
});
</script>
<style lang="scss" scoped>
.btn {
--mainColor: #10b981;
display: inline-block;
border: 1px solid var(--mainColor);
color: var(--mainColor);
&:hover {
background-color: var(--mainColor);
color: #fff;
}
}
</style>

Answer 1

I doubt that's possible. But you can run conditional logic in sass, like their official example:
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
#mixin theme-colors($light-theme: true) {
#if $light-theme {
background-color: $light-background;
color: $light-text;
} #else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
#include theme-colors($light-theme: true);
body.dark & {
#include theme-colors($light-theme: false);
}
}
https://sass-lang.com/documentation/at-rules/control/if

Answer 2

This is super easy if using Vue3:
<template>
<h1>HELLO</h1>
</template>
<script>
export default {
data() {
return {
h1Color: "red",
};
},
};
</script>
<style>
h1 {
color: v-bind(h1Color);
}
</style>
For a more extensive guide - here
If using Vue2 I would suggest using the same approach as in Steven B's answer, here the ref