使用要求：

• Vue 3.3 +
•  <style scoped>，Vue 的 v-bind() 在 CSS 中只支持在 scoped style 或 CSS Modules 中使用
• v-bind("cssVar") 双引号包裹响应式变量，变量 cssVar 必须是 Vue 的响应式数据（如 ref 或 reactive），并在 <script setup> 中声明

Vue 3.3 及以上版本支持在 <style scoped> 中直接使用 v-bind() 绑定响应式变量，原理是将值转为 CSS 变量。

实现原理

CSS 中的 v-bind()会被编译为 CSS 变量（CSS custom properties）：

/* 编译前 */
.btn-div { height: v-bind(heightStr); }/* 编译后 */
.btn-div[data-v-xxxx] {height: var(--xxxx-heightStr);
}

 问题：如果目标元素不是组件根元素，CSS 变量可能无法继承 

代码解释：

ReagentTable.vue

<script setup lang="ts" name="ReagentTable">
......// 过期提醒颜色，CSS 变量，通过 v-bind() 绑定给元素样式
const cssColorVar = ref("#fdd4e5");
const cssColorObj = ref({ color: "skyblue" });
const expirationReminderColor = useSystemOptionKeyVal("ResourcesExpirationReminderColor");......
</script><template>......
</template><style scoped lang="scss">
// 过期颜色
:deep .el-table .expire-row {// 基础变量，推荐使用双引号包裹// background-color: v-bind("cssColorVar");// 基础变量，可以省略双引号// background-color: v-bind(cssColorVar);// 对象变量，必须使用双引号包裹// background-color: v-bind("cssColorObj.color");// 对象变量，必须使用双引号包裹，属性 systemOptionValue 为 Ref，需 .value 取值background-color: v-bind("expirationReminderColor.systemOptionValue.value");
}
</style>

CSS代码使用

:deep .el-table .expire-row {// 对象变量，必须使用双引号包裹，属性 systemOptionValue 为 Ref，需 .value 取值background-color: v-bind("expirationReminderColor.systemOptionValue.value");
}

在浏览器开发工具查看到的内容：

<div data-v-ead3074d="" data-v-c1b61fb7="" style="--ead3074d-expirationReminderColor\.systemOptionValue\.value: #EED2EE;">