diff --git a/packages/cascader-panel/src/index.vue b/packages/cascader-panel/src/index.vue
index 5c06d85e44..da8a837279 100644
--- a/packages/cascader-panel/src/index.vue
+++ b/packages/cascader-panel/src/index.vue
@@ -58,6 +58,8 @@ import type {
   ElCascaderPanelContext,
 } from './types'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElCascaderPanel',
 
diff --git a/packages/cascader-panel/src/menu.vue b/packages/cascader-panel/src/menu.vue
index 48636aa7bf..22450b7abb 100644
--- a/packages/cascader-panel/src/menu.vue
+++ b/packages/cascader-panel/src/menu.vue
@@ -49,6 +49,8 @@ import {
 
 import type { PropType } from 'vue'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElCascaderMenu',
 
diff --git a/packages/cascader-panel/src/node.ts b/packages/cascader-panel/src/node.ts
index 1752e7b174..c00b04f695 100644
--- a/packages/cascader-panel/src/node.ts
+++ b/packages/cascader-panel/src/node.ts
@@ -7,6 +7,8 @@ import type {
   CascaderConfig,
 } from './types'
 
+export type Nullable<T> = null | T
+
 type ChildrenData = CascaderOption[] | undefined
 
 let uid = 0
diff --git a/packages/cascader-panel/src/store.ts b/packages/cascader-panel/src/store.ts
index 49a3578c90..b8db00dc28 100644
--- a/packages/cascader-panel/src/store.ts
+++ b/packages/cascader-panel/src/store.ts
@@ -7,6 +7,8 @@ import type {
   CascaderConfig,
 } from './types'
 
+export type Nullable<T> = null | T
+
 const flatNodes = (nodes: Node[], leafOnly: boolean) => {
   return nodes.reduce((res, node) => {
     if (node.isLeaf) {
diff --git a/packages/cascader-panel/src/types.ts b/packages/cascader-panel/src/types.ts
index db9c52b9a1..a43c66e647 100644
--- a/packages/cascader-panel/src/types.ts
+++ b/packages/cascader-panel/src/types.ts
@@ -2,6 +2,8 @@
 import type { VNode, InjectionKey } from 'vue'
 import type { default as CascaderNode } from './node'
 
+export type Nullable<T> = null | T
+
 export type { CascaderNode }
 
 export type CascaderNodeValue = string | number
diff --git a/packages/cascader-panel/src/utils.ts b/packages/cascader-panel/src/utils.ts
index e1149df8f5..b7a4410338 100644
--- a/packages/cascader-panel/src/utils.ts
+++ b/packages/cascader-panel/src/utils.ts
@@ -1,6 +1,8 @@
 
 import type { CascaderNode } from './types'
 
+export type Nullable<T> = null | T
+
 export const isLeaf = (el: HTMLElement) => !el.getAttribute('aria-owns')
 
 export const getSibling = (el: HTMLElement, distance: number): Nullable<Element> => {
diff --git a/packages/color-picker/__tests__/color-picker.spec.ts b/packages/color-picker/__tests__/color-picker.spec.ts
index c22ec51446..0790388177 100644
--- a/packages/color-picker/__tests__/color-picker.spec.ts
+++ b/packages/color-picker/__tests__/color-picker.spec.ts
@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils'
 import { ComponentPublicInstance, defineComponent, nextTick } from 'vue'
 import ColorPicker from '../src/index.vue'
 
+type Nullable<T> = null | T
+
 const _mount = (template: string, data: () => ({[key:string]: any;})) => {
   const Component = defineComponent({
     components: {
diff --git a/packages/color-picker/src/components/alpha-slider.vue b/packages/color-picker/src/components/alpha-slider.vue
index cdac7a73b9..323a9b3c6f 100644
--- a/packages/color-picker/src/components/alpha-slider.vue
+++ b/packages/color-picker/src/components/alpha-slider.vue
@@ -26,6 +26,8 @@ import { defineComponent, watch, ref, onMounted, getCurrentInstance, PropType }
 import type Color from '../color'
 import draggable from '../draggable'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElColorAlphaSlider',
   props: {
diff --git a/packages/directives/click-outside/index.ts b/packages/directives/click-outside/index.ts
index 1bd293f68b..8fdfdcfb49 100644
--- a/packages/directives/click-outside/index.ts
+++ b/packages/directives/click-outside/index.ts
@@ -2,6 +2,7 @@ import { on } from '@element-plus/utils/dom'
 import isServer from '@element-plus/utils/isServer'
 import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue'
 
+type Nullable<T> = null | T
 
 type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
 
diff --git a/packages/dropdown/src/dropdown.ts b/packages/dropdown/src/dropdown.ts
index 5b707804a4..2dab89524f 100644
--- a/packages/dropdown/src/dropdown.ts
+++ b/packages/dropdown/src/dropdown.ts
@@ -4,6 +4,8 @@ import {
   Ref,
 } from 'vue'
 
+export type Nullable<T> = null | T
+
 export interface IElDropdownInstance {
   instance?: ComponentInternalInstance
   dropdownSize?: ComputedRef<string>
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 144da1f310..ce6b48c600 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -68,6 +68,8 @@ import ElPopper from '@element-plus/popper'
 import { useDropdown } from './useDropdown'
 import { addUnit } from '@element-plus/utils/util'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElDropdown',
   components: {
diff --git a/packages/dropdown/src/useDropdown.ts b/packages/dropdown/src/useDropdown.ts
index e30ba4b182..6762b8973e 100644
--- a/packages/dropdown/src/useDropdown.ts
+++ b/packages/dropdown/src/useDropdown.ts
@@ -4,6 +4,8 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, addClass } from '@element-plus/utils/dom'
 import type { IElDropdownInstance } from './dropdown'
 
+export type Nullable<T> = null | T
+
 export const useDropdown = () => {
   const ELEMENT = useGlobalConfig()
   const elDropdown = inject<IElDropdownInstance>('elDropdown', {})
diff --git a/packages/form/src/label-wrap.ts b/packages/form/src/label-wrap.ts
index a0e28d3a4b..374e52e8b7 100644
--- a/packages/form/src/label-wrap.ts
+++ b/packages/form/src/label-wrap.ts
@@ -5,6 +5,8 @@ import { addResizeListener, removeResizeListener, ResizableElement } from '@elem
 
 import type { CSSProperties } from 'vue'
 
+export type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElLabelWrap',
   props: {
diff --git a/packages/hooks/use-popper/index.ts b/packages/hooks/use-popper/index.ts
index 64d106d76d..7d2b3a93d8 100644
--- a/packages/hooks/use-popper/index.ts
+++ b/packages/hooks/use-popper/index.ts
@@ -48,6 +48,7 @@ import type { Trigger } from './use-target-events'
 
 export type Effect = 'light' | 'dark'
 export type Offset = [number, number] | number
+export type Nullable<T> = null | T
 
 type ElementType = ComponentPublicInstance | HTMLElement
 
diff --git a/packages/loading/src/createLoadingComponent.ts b/packages/loading/src/createLoadingComponent.ts
index 4e26fa743a..3b16aba5ed 100644
--- a/packages/loading/src/createLoadingComponent.ts
+++ b/packages/loading/src/createLoadingComponent.ts
@@ -2,6 +2,8 @@ import { createVNode, h, reactive, ref, render, toRefs, Transition, VNode, vShow
 import { removeClass } from '@element-plus/utils/dom'
 import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading.type'
 
+export type Nullable<T> = null | T
+
 export function createLoadingComponent({
   options,
   globalLoadingOption,
diff --git a/packages/pagination/src/jumper.vue b/packages/pagination/src/jumper.vue
index 985192ba8c..4d633b7bd7 100644
--- a/packages/pagination/src/jumper.vue
+++ b/packages/pagination/src/jumper.vue
@@ -26,6 +26,8 @@ import { useLocaleInject } from '@element-plus/hooks'
 import ElInput from '@element-plus/input'
 import { usePagination } from './usePagination'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   components: {
     ElInput,
diff --git a/packages/pagination/src/sizes.vue b/packages/pagination/src/sizes.vue
index 5db38de126..163215b44c 100644
--- a/packages/pagination/src/sizes.vue
+++ b/packages/pagination/src/sizes.vue
@@ -25,6 +25,8 @@ import { useLocaleInject } from '@element-plus/hooks'
 import isEqual from 'lodash/isEqual'
 import { usePagination } from './usePagination'
 
+export type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'Sizes',
   components: {
diff --git a/packages/popper/src/use-popper/defaults.ts b/packages/popper/src/use-popper/defaults.ts
index d6d2f14071..48f96a3a8d 100644
--- a/packages/popper/src/use-popper/defaults.ts
+++ b/packages/popper/src/use-popper/defaults.ts
@@ -6,6 +6,8 @@ export enum Effect {
   LIGHT = 'light'
 }
 
+export type Nullable<T> = null | T
+
 export type RefElement = Nullable<HTMLElement>
 export type Offset = [number, number] | number
 
diff --git a/packages/popper/src/use-popper/index.ts b/packages/popper/src/use-popper/index.ts
index 07a7939744..c4d23445c2 100644
--- a/packages/popper/src/use-popper/index.ts
+++ b/packages/popper/src/use-popper/index.ts
@@ -32,6 +32,8 @@ export interface PopperEvents {
   onBlur?: (e: Event) => void
 }
 
+export type Nullable<T> = null | T
+
 export const DEFAULT_TRIGGER = ['hover']
 export const UPDATE_VISIBLE_EVENT = 'update:visible'
 export default function(
diff --git a/packages/scrollbar/src/bar.vue b/packages/scrollbar/src/bar.vue
index 96b71cec0f..88077201be 100644
--- a/packages/scrollbar/src/bar.vue
+++ b/packages/scrollbar/src/bar.vue
@@ -21,6 +21,8 @@ import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, Ref
 import { off, on } from '@element-plus/utils/dom'
 import { BAR_MAP, renderThumbStyle } from './util'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'Bar',
   props: {
diff --git a/packages/slider/src/index.vue b/packages/slider/src/index.vue
index 102e53a0ba..a61fb6335f 100644
--- a/packages/slider/src/index.vue
+++ b/packages/slider/src/index.vue
@@ -105,6 +105,8 @@ import { useStops } from './useStops'
 
 import type { PropType } from 'vue'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElSlider',
 
diff --git a/packages/slider/src/slider.type.ts b/packages/slider/src/slider.type.ts
index 38bd481221..24a6e76ceb 100644
--- a/packages/slider/src/slider.type.ts
+++ b/packages/slider/src/slider.type.ts
@@ -21,6 +21,8 @@ export interface ISliderProps {
   marks?: Record<number, any>
 }
 
+export type Nullable<T> = null | T
+
 export interface ISliderInitData {
   firstValue: Nullable<number>
   secondValue: Nullable<number>
diff --git a/packages/slider/src/useSlide.ts b/packages/slider/src/useSlide.ts
index 2994b08716..6fe7b9724c 100644
--- a/packages/slider/src/useSlide.ts
+++ b/packages/slider/src/useSlide.ts
@@ -5,6 +5,8 @@ import { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
 
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
 
+export type Nullable<T> = null | T
+
 export const useSlide = (props: ISliderProps, initData: ISliderInitData, emit) => {
   const elForm = inject(elFormKey, {} as ElFormContext)
   const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
diff --git a/packages/table/src/table/defaults.ts b/packages/table/src/table/defaults.ts
index 332f1007af..9b3535618b 100644
--- a/packages/table/src/table/defaults.ts
+++ b/packages/table/src/table/defaults.ts
@@ -4,6 +4,7 @@ import { TableColumnCtx } from '../table-column/defaults'
 import type TableLayout from '../table-layout'
 
 export type DefaultRow = any
+export type Nullable<T> = null | T
 
 interface TableRefs {
   headerWrapper: HTMLElement
diff --git a/packages/table/src/util.ts b/packages/table/src/util.ts
index 682d20a561..1ebe998514 100644
--- a/packages/table/src/util.ts
+++ b/packages/table/src/util.ts
@@ -6,6 +6,8 @@ import { createPopper } from '@popperjs/core'
 import PopupManager from '@element-plus/utils/popup-manager'
 import { TableColumnCtx } from './table-column/defaults'
 
+export type Nullable<T> = null | T
+
 export const getCell = function(event: Event): HTMLElement {
   let cell = event.target as HTMLElement
 
diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue
index 5da63daba1..facd26f22f 100644
--- a/packages/tabs/src/tab-nav.vue
+++ b/packages/tabs/src/tab-nav.vue
@@ -8,6 +8,7 @@ import TabBar from './tab-bar.vue'
 import { NOOP, capitalize } from '@vue/shared'
 import { RootTabs, Pane, ITabType } from './tabs.vue'
 
+export type Nullable<T> = null | T
 type RefElement = Nullable<HTMLElement>
 
 interface Scrollable {
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index a6634a1b97..5b4d869112 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -91,3 +91,4 @@
 @import './descriptions';
 @import './descriptions-item';
 @import './result.scss';
+@import './config-provider.scss';
diff --git a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue b/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
index 06fcffbc10..c90bc8c151 100644
--- a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
+++ b/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
@@ -69,6 +69,8 @@ import { RepeatClick } from '@element-plus/directives'
 import ElScrollbar from '@element-plus/scrollbar'
 import { getTimeLists } from './useTimePicker'
 
+export type Nullable<T> = null | T
+
 export default defineComponent({
 
   directives: {
diff --git a/packages/tree/src/model/node.ts b/packages/tree/src/model/node.ts
index d5e1d7eaad..d93d9cc491 100644
--- a/packages/tree/src/model/node.ts
+++ b/packages/tree/src/model/node.ts
@@ -12,6 +12,8 @@ import {
   TreeNodeChildState,
 } from '../tree.type'
 
+type Nullable<T> = null | T
+
 export const getChildState = (node: Node[]): TreeNodeChildState => {
   let all = true
   let none = true
@@ -72,7 +74,7 @@ const getPropertyFromData = function(node: Node, prop: string): any {
 
 let nodeIdSeed = 0
 
-export default class Node {
+class Node {
   id: number;
   text: string;
   checked: boolean;
@@ -515,3 +517,5 @@ export default class Node {
     }
   }
 }
+
+export default Node
diff --git a/packages/tree/src/model/useKeydown.ts b/packages/tree/src/model/useKeydown.ts
index e5e9932ca2..8491b6a19c 100644
--- a/packages/tree/src/model/useKeydown.ts
+++ b/packages/tree/src/model/useKeydown.ts
@@ -3,6 +3,8 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, off } from '@element-plus/utils/dom'
 import TreeStore from './tree-store'
 
+export type Nullable<T> = null | T
+
 interface UseKeydownOption {
   el$: Ref<HTMLElement>
 }
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index 77e5f06996..2d345c0511 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -87,6 +87,8 @@ import { useDragNodeEmitter } from './model/useDragNode'
 import Node from './model/node'
 import { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElTreeNode',
   components: {
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index b3eef2aef5..aa59d15223 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -50,6 +50,8 @@ import {
   RootTreeType,
 } from './tree.type'
 
+type Nullable<T> = null | T
+
 export default defineComponent({
   name: 'ElTree',
   components: { ElTreeNode },
diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
index b0297cd3ad..a58fa41687 100644
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -28,6 +28,7 @@ import type {
 
 type PFileHandler<T> = PropType<FileHandler<T>>
 type PFileResultHandler<T = any> = PropType<FileResultHandler<T>>
+type Nullable<T> = null | T
 
 export default defineComponent({
   name: 'ElUpload',
diff --git a/packages/upload/src/upload.vue b/packages/upload/src/upload.vue
index d61b26fa93..99f478584b 100644
--- a/packages/upload/src/upload.vue
+++ b/packages/upload/src/upload.vue
@@ -35,6 +35,8 @@ import UploadDragger from './upload-dragger.vue'
 import type { PropType } from 'vue'
 import type { ListType, UploadFile, ElFile } from './upload.type'
 
+type Nullable<T> = null | T
+
 type IFileHanlder = (
   file: Nullable<ElFile[]>,
   fileList?: UploadFile[],
diff --git a/packages/utils/dom.ts b/packages/utils/dom.ts
index edd20f6b0d..c687728ef4 100644
--- a/packages/utils/dom.ts
+++ b/packages/utils/dom.ts
@@ -1,6 +1,8 @@
 import isServer from './isServer'
 import { camelize, isObject } from './util'
 
+export type Nullable<T> = null | T
+
 /* istanbul ignore next */
 const trim = function(s: string) {
   return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
diff --git a/packages/utils/util.ts b/packages/utils/util.ts
index 96458d0b16..0db86b8f2d 100644
--- a/packages/utils/util.ts
+++ b/packages/utils/util.ts
@@ -7,6 +7,8 @@ import { warn } from './error'
 import type { ComponentPublicInstance, Ref } from 'vue'
 import type { AnyFunction } from './types'
 
+export type Nullable<T> = null | T
+
 // type polyfill for compat isIE method
 declare global {
   interface Document {