vue3.0 CSS中混入JS變量(css v-bind)：el-dialog中無法使用

問題

在使用element plus中的el-dialog時，嘗試使用css v-bind語法，不報錯，也不起作用。

解決方案

在網上也沒找到解決方案，甚至貌似遇到的人都不多，只好自己嘗試了，最終在github的issue上看到一絲絲蛛絲馬跡，然後採用在父組件中使用穿透式定義的方式, 關閉append-to-body。

第一步：el-dialog: append-to-body: false

第二步：script:
const color = ref('red');
第三步：scss:

.box {
    &:deep(.zh-modal .body-box .test) {
        color: v-bind(color);
    }
}

總結

若如此的話，不如直接從父組件進行穿透，也就用不到該屬性了~

參考地址：
https://github.com/element-plus/element-plus/issues/4037
https://github.com/vuejs/core/issues/4605
https://github.com/vuejs/core/issues/3921