fix(components): use namespace (#9299)

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>

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 = () => {

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 = {

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 })]
                 ),

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