js 动态写入css变量，css读取js动态变量方式

代码

<template>
    <div>
        <span class="myColor">sdfsdfs</span>
        <br />
        <span style="color: var(--my-color)">沙发斯蒂芬斯蒂芬</span>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';

onMounted(() => {
    //html 标签写入动态css变量
    document.documentElement.style.setProperty('--my-color', 'red');
});
</script>

<style lang="scss" scoped>
table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 5px;
}

.myColor {
    color: var(--my-color);
}
</style>