From 7a45b88783fc7ebffab4f8c81fab65120210531d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Mon, 16 May 2022 20:58:50 +0800
Subject: [PATCH] fix(components): [date-picker] date-table-cell namespace
 (#7684)

* fix(components): date-table-cell & scrollbar namespace

* fix(components): revert scroll className & add comment
---
 docs/components.d.ts                                        | 1 -
 .../date-picker/src/date-picker-com/basic-cell-render.ts    | 6 ++++--
 packages/utils/dom/scroll.ts                                | 2 ++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/components.d.ts b/docs/components.d.ts
index 6c034ce720..151e8f83d6 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -44,7 +44,6 @@ declare module '@vue/runtime-core' {
     Playground: typeof import('./.vitepress/vitepress/components/icons/playground.vue')['default']
     Resource: typeof import('./.vitepress/vitepress/components/globals/resource.vue')['default']
     ResourceSvg: typeof import('./.vitepress/vitepress/components/home/svg/resource-svg.vue')['default']
-    Right: typeof import('./.vitepress/vitepress/components/sponsors/right.vue')['default']
     RightLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/right-layer-svg.vue')['default']
     RightRichtextList: typeof import('./.vitepress/vitepress/components/sponsors/right-richtext-list.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
index b6657b9c47..325729b40b 100644
--- a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
+++ b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
@@ -1,5 +1,6 @@
 import { defineComponent, h, inject } from 'vue'
 import { buildProps, definePropType } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
 import { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'
 import type { DateCell } from '../date-picker.type'
 
@@ -11,6 +12,7 @@ export default defineComponent({
     },
   }),
   setup(props) {
+    const ns = useNamespace('date-table-cell')
     const picker = inject(ROOT_PICKER_INJECTION_KEY)
     return () => {
       const cell = props.cell
@@ -27,13 +29,13 @@ export default defineComponent({
       return h(
         'div',
         {
-          class: 'el-date-table-cell',
+          class: ns.b(),
         },
         [
           h(
             'span',
             {
-              class: 'el-date-table-cell__text',
+              class: ns.e('text'),
             },
             [cell?.text]
           ),
diff --git a/packages/utils/dom/scroll.ts b/packages/utils/dom/scroll.ts
index a3dcb064ec..990eecbcd0 100644
--- a/packages/utils/dom/scroll.ts
+++ b/packages/utils/dom/scroll.ts
@@ -40,6 +40,8 @@ export const getScrollBarWidth = (): number => {
   if (scrollBarWidth !== undefined) return scrollBarWidth
 
   const outer = document.createElement('div')
+  // Cannot access 'propKey' before initialization
+  // need to be dynamic namespace
   outer.className = 'el-scrollbar__wrap'
   outer.style.visibility = 'hidden'
   outer.style.width = '100px'