[Component] [dialog] <style scoped> 对ElDialog 不生效

[trcat]

Bug Type: Component

Environment

• Vue Version: 3.4.21
• Element Plus Version: 2.6.0
• Browser / OS: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
• Build Tool: Vue CLI

Reproduction

Related Component

• el-dialog

Reproduction Link

Element Plus Playground

Steps to reproduce

1. 复制官网Dialog示例代码
2. 设置 style scoped 样式，并将对应类名加到 Dialog 上

What is Expected?

在 Dialog 上的类名样式生效

What is actually happening?

在 Dialog 上的类名样式未生效，也没有看到有因 style scoped 而生产的自定义属性

Additional comments

我不知道这个是 Element UI的问题，还是 Vue Cli 的问题

[huangjw1997]

不是 Element UI的问题，请去掉scoped，不然样式不会生效

[trcat]

不是 Element UI的问题，请去掉scoped，不然样式不会生效

但是 Vue2 版本的没有这个问题，查看源码确实也没什么问题，感觉可能和 vue cli 或 vue 有关

[huangjw1997]

不是 Element UI的问题，请去掉scoped，不然样式不会生效

但是 Vue2 版本的没有这个问题，查看源码确实也没什么问题，感觉可能和 vue cli 或 vue 有关

这算CSS作用域的问题吧

[trcat]

不是 Element UI的问题，请去掉scoped，不然样式不会生效

但是 Vue2 版本的没有这个问题，查看源码确实也没什么问题，感觉可能和 vue cli 或 vue 有关

这算CSS作用域的问题吧

是啊，ElDialg 结构上没有出现自定义属性，所以样式没有生效。这个现象应该是不符合预期的吧

[kaine0923]

具体原因参见 #10515

[plainheart]

这种情况一般建议使用全局样式，或者先获取到当前组件的 scopeId 然后手动绑定至需要使用的组件上。参见这个例子。

如需多处使用，可以考虑如下封装一个工具函数，在需要的地方 import 然后使用 v-bind 绑定至组件元素上。

export const useScopeId = () => {
  const instance = getCurrentInstance()
  return instance && instance.vnode && instance.vnode.scopeId || instance.type.__scopeId
}

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。