如何将值从Vue组件属性传递到组件的SCSS？

props: {
  backgroundColor: {
    type: String,
    default: 'red'
  }
}

<style lang="scss">
  .my-component {
    background-color: #{backgroundColor};
  }
</style>

<template>
  <div>
    <my-component :background-color="myColor"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myColor: 'blue'
    }
  }
}
</script>