[bug report] invalid CSS v-bind in El dialog

[wanderbaby]

Element Plus version

1.1.0-beta.24

OS/Browsers version

chrome 95

Vue version

3.2.20

Reproduction Link

https://codesandbox.io/s/element-plus-spa-forked-6v051?file=/src/dialog.vue:70-76

Steps to reproduce

• 把弹框作为根节点组件
• 添加appent-to-body
• 在css中使用v-bind绑定setup中的变量无效

What is Expected?

希望考虑一下这种情况要怎么实现

What is actually happening?

在css中使用v-bind，vue把当前编译好的带hash值的变量通过style的方式关联到根节点的dom上，但是把dialog作为根节点时，el-dialog自定义了一段style样式

[element-bot]

Translation of this issue:

Element Plus version

1.1.0-beta.24

OS/Browsers version

chrome 95

Vue version

3.2.20

Reproduction Link

https://codesandbox.io/s/element-plus-spa-forked-6v051? file=/src/dialog.vue:70-76

Steps to reproduce

*Take the bullet frame as the root node component

*Add app to body
*Using v-bind in CSS to bind variables in setup is invalid

What is Expected?

I hope to consider how to achieve this situation

What is actually happening?

Using v-bind in CSS, Vue associates the currently compiled variables with hash values to the dom of the root node in style. However, when dialog is used as the root node, El dialog customizes a style

[zhengyangkang]

同样的问题，appent-to-body后无法使用变量注入scss(v-bind)，需要开放body的style参数或者支持该变量注入。
For the same problem, variable injection SCSS (v-bind) cannot be used after Appent to body. You need to open the style parameter of body or support this variable injection

[YunYouJun]

A temporary solution: just use css var.

[chenxch]

vue issue

[wanderbaby]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。