VUE中如何使用 JavaScript 变量来设置CSS变量，从而修改CSS属性 --color 的值

// Vue 组件（组件名称：DataView）
<template>
  <div :style="{ '--mycolor': color }">这是一个带有自定义颜色的元素</div>
</template>

<script setup lang="ts">

const props =defineProps({
title: {
  type: String,
  required: true,
  default: "",//'默认名称'
},
color: {
    type: String,
    required: true,
    default: "rgba(223, 65, 152, 0.8)",//'默认名称'
  }
})

</script>

<style scoped>
div {
  /* 应用自定义属性的样式 */
  color: var(--mycolor);
}
</style>

使用组件方式：

 <DataView title="名称:"  color="#7ed321"/>