From eea3e60385fef7df06176f79fc6f7bc29e5374e8 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Sat, 13 Aug 2022 14:43:00 +0800
Subject: [PATCH] fix(components): use namespace (#9299)

---
 packages/components/color-picker/src/index.vue            | 2 +-
 packages/components/popover/src/popover.vue               | 2 +-
 packages/components/slot/src/only-child.tsx               | 4 +++-
 packages/components/table/src/table-body/render-helper.ts | 2 +-
 packages/hooks/use-id/index.ts                            | 5 ++++-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index f65f0b18ec..2054c6813a 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -10,7 +10,7 @@
     :stop-popper-mouse-event="false"
     effect="light"
     trigger="click"
-    transition="el-zoom-in-top"
+    :transition="`${ns.namespace.value}-zoom-in-top`"
     persistent
   >
     <template #content>
diff --git a/packages/components/popover/src/popover.vue b/packages/components/popover/src/popover.vue
index 01bc1698f9..09a1087b58 100644
--- a/packages/components/popover/src/popover.vue
+++ b/packages/components/popover/src/popover.vue
@@ -84,7 +84,7 @@ const kls = computed(() => {
 })
 
 const gpuAcceleration = computed(() => {
-  return props.transition === 'el-fade-in-linear'
+  return props.transition === `${ns.namespace.value}-fade-in-linear`
 })
 
 const hide = () => {
diff --git a/packages/components/slot/src/only-child.tsx b/packages/components/slot/src/only-child.tsx
index 636fe46469..d0ed4ff5ed 100644
--- a/packages/components/slot/src/only-child.tsx
+++ b/packages/components/slot/src/only-child.tsx
@@ -11,6 +11,7 @@ import { NOOP, isObject } from '@vue/shared'
 import {
   FORWARD_REF_INJECTION_KEY,
   useForwardRefDirective,
+  useNamespace,
 } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils'
 
@@ -75,7 +76,8 @@ function findFirstLegitChild(node: VNode[] | undefined): VNode | null {
 }
 
 function wrapTextContent(s: string | VNode) {
-  return <span class="el-only-child__content">{s}</span>
+  const ns = useNamespace('only-child')
+  return <span class={ns.e('content')}>{s}</span>
 }
 
 export type OnlyChildExpose = {
diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts
index a0db13e6f6..9ecbc03a7c 100644
--- a/packages/components/table/src/table-body/render-helper.ts
+++ b/packages/components/table/src/table-body/render-helper.ts
@@ -164,7 +164,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
                   'td',
                   {
                     colspan: columns.length,
-                    class: 'el-table__cell el-table__expanded-cell',
+                    class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,
                   },
                   [renderExpanded({ row, $index, store, expanded })]
                 ),
diff --git a/packages/hooks/use-id/index.ts b/packages/hooks/use-id/index.ts
index 526b0fffb4..988e20f504 100644
--- a/packages/hooks/use-id/index.ts
+++ b/packages/hooks/use-id/index.ts
@@ -1,6 +1,8 @@
 import { computed, inject, unref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { debugWarn } from '@element-plus/utils'
+import { useGlobalConfig } from '../use-global-config'
+import { defaultNamespace } from '../use-namespace'
 
 import type { InjectionKey, Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
@@ -32,10 +34,11 @@ usage: app.provide(ID_INJECTION_KEY, {
     )
   }
 
+  const namespace = useGlobalConfig('namespace', defaultNamespace)
   const idRef = computed(
     () =>
       unref(deterministicId) ||
-      `el-id-${idInjection.prefix}-${idInjection.current++}`
+      `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`
   )
 
   return idRef