I am currently working on a Vue component and I want to style it dynamically using properties that are passed into it.
My goal is to adjust my global SCSS variables based on a color passed in as a property to the component.
Although I have created a simplified version of what I am attempting to achieve, the :style attribute doesn't seem to be setting the variable correctly.
Is there a way to make this work or how should I approach this issue?
<template>
<div id="app">
<p :style="{ $backgroundColor: 'green' }">{{ message }}</p>
</div>
</template>
<style>
$backgroundColor: red;
p {
background: $backgroundColor;
}
</style>