使用要求：

• 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;">

?