fix(data-table): can't set n-dropdown's theme-overrides, closes #3613

2025-03-13 13:59:04 +08:00 · 2022-09-04 23:04:40 +08:00 · 2022-09-04 23:04:40 +08:00 · fc3ee842ef
commit fc3ee842ef
parent f725732b55
16 changed files with 229 additions and 221 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -11,6 +11,7 @@

 - Fix `n-menu`'s `value` will cause useless rendering of menu item, closes [#3670](https://github.com/tusen-ai/naive-ui/issues/3670).
 - Fix `n-date-picker`'s style is unexpected in `inline-theme-disabled` mode, closes [#3655](https://github.com/tusen-ai/naive-ui/issues/3655).
+- Fix `n-data-table` can't set `n-dropdown`'s `theme-overrides`, closes [#3613](https://github.com/tusen-ai/naive-ui/issues/3613).

 ## 2.33.2

--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -11,6 +11,7 @@

 - 修复 `n-menu` 在 `value` 改变时会引发菜单项无用的渲染，关闭 [#3670](https://github.com/tusen-ai/naive-ui/issues/3670)
 - 修复 `n-date-picker` 在 `inline-theme-disabled` 模式下样式不正常，关闭 [#3655](https://github.com/tusen-ai/naive-ui/issues/3655)
+- 修复 `n-data-table` 无法设定 `n-dropdown` 的 `theme-overrides`，关闭 [#3613](https://github.com/tusen-ai/naive-ui/issues/3613)

 ## 2.33.2

--- a/src/data-table/index.ts
+++ b/src/data-table/index.ts
@ -1,6 +1,7 @@
-export { default as NDataTable, dataTableProps } from './src/DataTable'
-export type { DataTableProps } from './src/DataTable'
+export { default as NDataTable } from './src/DataTable'
+export { dataTableProps } from './src/interface'
 export type {
+  DataTableProps,
  RowKey as DataTableRowKey,
  RenderFilter as DataTableRenderFilter,
  RenderSorter as DataTableRenderSorter,
--- a/src/data-table/src/DataTable.tsx
+++ b/src/data-table/src/DataTable.tsx
@ -4,187 +4,28 @@ import {
  defineComponent,
  ref,
  provide,
-  PropType,
-  ExtractPropTypes,
  toRef,
  CSSProperties,
  Transition,
  watchEffect,
-  onDeactivated,
-  VNodeChild
+  onDeactivated
 } from 'vue'
 import { createId } from 'seemly'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
-import type { ThemeProps } from '../../_mixins'
 import { NBaseLoading } from '../../_internal'
 import { NPagination } from '../../pagination'
-import type { PaginationProps } from '../../pagination'
 import { createKey, warnOnce } from '../../_utils'
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { dataTableLight } from '../styles'
-import type { DataTableTheme } from '../styles'
 import MainTable from './MainTable'
 import { useCheck } from './use-check'
 import { useTableData } from './use-table-data'
 import { useScroll } from './use-scroll'
-import type {
-  CreateRowClassName,
-  CreateRowKey,
-  OnUpdateCheckedRowKeys,
-  OnUpdateSorter,
-  RowKey,
-  TableColumns,
-  RowData,
-  OnUpdateFilters,
-  MainTableRef,
-  DataTableInst,
-  OnUpdateExpandedRowKeys,
-  CreateSummary,
-  CreateRowProps,
-  DataTableOnLoad,
-  TableBaseColumn
-} from './interface'
-import { dataTableInjectionKey } from './interface'
+import type { RowKey, MainTableRef, DataTableInst } from './interface'
+import { dataTableInjectionKey, dataTableProps } from './interface'
 import { useGroupHeader } from './use-group-header'
 import { useExpand } from './use-expand'
 import style from './styles/index.cssr'

-export const dataTableProps = {
-  ...(useTheme.props as ThemeProps<DataTableTheme>),
-  pagination: {
-    type: [Object, Boolean] as PropType<false | PaginationProps>,
-    default: false
-  },
-  paginateSinglePage: {
-    type: Boolean,
-    default: true
-  },
-  minHeight: [Number, String] as PropType<string | number>,
-  maxHeight: [Number, String] as PropType<string | number>,
-  // Use any type as row data to make prop data acceptable
-  columns: {
-    type: Array as PropType<TableColumns<any>>,
-    default: () => []
-  },
-  rowClassName: [String, Function] as PropType<
-  string | CreateRowClassName<any>
-  >,
-  rowProps: Function as PropType<CreateRowProps<any>>,
-  rowKey: Function as PropType<CreateRowKey<any>>,
-  summary: [Function] as PropType<CreateSummary<any>>,
-  data: {
-    type: Array as PropType<RowData[]>,
-    default: () => []
-  },
-  loading: Boolean,
-  bordered: {
-    type: Boolean as PropType<boolean | undefined>,
-    default: undefined
-  },
-  bottomBordered: {
-    type: Boolean as PropType<boolean | undefined>,
-    default: undefined
-  },
-  striped: Boolean,
-  scrollX: [Number, String] as PropType<string | number>,
-  defaultCheckedRowKeys: {
-    type: Array as PropType<RowKey[]>,
-    default: () => []
-  },
-  checkedRowKeys: Array as PropType<RowKey[]>,
-  singleLine: {
-    type: Boolean,
-    default: true
-  },
-  singleColumn: Boolean,
-  size: {
-    type: String as PropType<'small' | 'medium' | 'large'>,
-    default: 'medium'
-  },
-  remote: Boolean,
-  defaultExpandedRowKeys: {
-    type: Array as PropType<RowKey[]>,
-    default: []
-  },
-  defaultExpandAll: Boolean,
-  expandedRowKeys: Array as PropType<RowKey[]>,
-  stickyExpandedRows: Boolean,
-  virtualScroll: Boolean,
-  tableLayout: {
-    type: String as PropType<'auto' | 'fixed'>,
-    default: 'auto'
-  },
-  allowCheckingNotLoaded: Boolean,
-  cascade: {
-    type: Boolean,
-    default: true
-  },
-  childrenKey: {
-    type: String,
-    default: 'children'
-  },
-  indent: {
-    type: Number,
-    default: 16
-  },
-  flexHeight: Boolean,
-  paginationBehaviorOnFilter: {
-    type: String as PropType<'first' | 'current'>,
-    default: 'current'
-  },
-  renderCell: Function as PropType<
-  (value: any, rowData: object, column: TableBaseColumn) => VNodeChild
-  >,
-  renderExpandIcon: Function as PropType<() => VNodeChild>,
-  onLoad: Function as PropType<DataTableOnLoad>,
-  'onUpdate:page': [Function, Array] as PropType<
-  PaginationProps['onUpdate:page']
-  >,
-  onUpdatePage: [Function, Array] as PropType<PaginationProps['onUpdate:page']>,
-  'onUpdate:pageSize': [Function, Array] as PropType<
-  PaginationProps['onUpdate:pageSize']
-  >,
-  onUpdatePageSize: [Function, Array] as PropType<
-  PaginationProps['onUpdate:pageSize']
-  >,
-  'onUpdate:sorter': [Function, Array] as PropType<MaybeArray<OnUpdateSorter>>,
-  onUpdateSorter: [Function, Array] as PropType<MaybeArray<OnUpdateSorter>>,
-  'onUpdate:filters': [Function, Array] as PropType<
-  MaybeArray<OnUpdateFilters>
-  >,
-  onUpdateFilters: [Function, Array] as PropType<MaybeArray<OnUpdateFilters>>,
-  'onUpdate:checkedRowKeys': [Function, Array] as PropType<
-  MaybeArray<OnUpdateCheckedRowKeys>
-  >,
-  onUpdateCheckedRowKeys: [Function, Array] as PropType<
-  MaybeArray<OnUpdateCheckedRowKeys>
-  >,
-  'onUpdate:expandedRowKeys': [Function, Array] as PropType<
-  MaybeArray<OnUpdateExpandedRowKeys>
-  >,
-  onUpdateExpandedRowKeys: [Function, Array] as PropType<
-  MaybeArray<OnUpdateExpandedRowKeys>
-  >,
-  onScroll: Function as PropType<(e: Event) => void>,
-  // deprecated
-  onPageChange: [Function, Array] as PropType<PaginationProps['onUpdate:page']>,
-  onPageSizeChange: [Function, Array] as PropType<
-  PaginationProps['onUpdate:pageSize']
-  >,
-  onSorterChange: [Function, Array] as PropType<
-  MaybeArray<OnUpdateSorter> | undefined
-  >,
-  onFiltersChange: [Function, Array] as PropType<
-  MaybeArray<OnUpdateFilters> | undefined
-  >,
-  onCheckedRowKeysChange: [Function, Array] as PropType<
-  MaybeArray<OnUpdateCheckedRowKeys> | undefined
-  >
-} as const
-
-export type DataTableProps = ExtractPublicPropTypes<typeof dataTableProps>
-export type DataTableSetupProps = ExtractPropTypes<typeof dataTableProps>
-
 export default defineComponent({
  name: 'DataTable',
  alias: ['AdvancedTable'],
@ -330,6 +171,7 @@ export default defineComponent({
      return props.tableLayout
    })
    provide(dataTableInjectionKey, {
+      props,
      renderExpandIconRef: toRef(props, 'renderExpandIcon'),
      loadingKeySetRef: ref(new Set<RowKey>()),
      slots,
--- a/src/data-table/src/MainTable.tsx
+++ b/src/data-table/src/MainTable.tsx
@ -3,12 +3,12 @@ import { h, ref, defineComponent, inject, computed, watchEffect } from 'vue'
 import { formatLength } from '../../_utils'
 import TableHeader from './TableParts/Header'
 import TableBody from './TableParts/Body'
-import {
-  dataTableInjectionKey,
+import type {
  MainTableBodyRef,
  MainTableHeaderRef,
  MainTableRef
 } from './interface'
+import { dataTableInjectionKey } from './interface'

 export default defineComponent({
  setup () {
--- a/src/data-table/src/TableParts/SelectionMenu.tsx
+++ b/src/data-table/src/TableParts/SelectionMenu.tsx
@ -3,11 +3,9 @@ import { NDropdown } from '../../../dropdown'
 import { NLocale } from '../../../locales'
 import { NBaseIcon } from '../../../_internal'
 import { ChevronDownIcon } from '../../../_internal/icons'
-import type { InternalRowData } from '../interface'
+import type { InternalRowData, DataTableSelectionOption } from '../interface'
 import { dataTableInjectionKey } from '../interface'

-export type DataTableSelectionOption = 'all' | 'none'
-
 const allKey = '_n_all__'
 const noneKey = '_n_none__'

@ -86,8 +84,9 @@ export default defineComponent({
      required: true
    }
  },
-  setup () {
+  setup (props) {
    const {
+      props: dataTableProps,
      localeRef,
      checkOptionsRef,
      rawPaginatedDataRef,
@ -95,37 +94,40 @@ export default defineComponent({
      doUncheckAll
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = inject(dataTableInjectionKey)!
-    return {
-      handleSelect: computed(() =>
-        createSelectHandler(
-          checkOptionsRef.value,
-          rawPaginatedDataRef,
-          doCheckAll,
-          doUncheckAll
-        )
-      ),
-      options: computed(() =>
-        createDropdownOptions(checkOptionsRef.value, localeRef.value)
+    const handleSelectRef = computed(() =>
+      createSelectHandler(
+        checkOptionsRef.value,
+        rawPaginatedDataRef,
+        doCheckAll,
+        doUncheckAll
+      )
+    )
+    const optionsRef = computed(() =>
+      createDropdownOptions(checkOptionsRef.value, localeRef.value)
+    )
+    return () => {
+      const { clsPrefix } = props
+      return (
+        <NDropdown
+          theme={dataTableProps.theme?.peers?.Dropdown}
+          themeOverrides={dataTableProps.themeOverrides?.peers?.Dropdown}
+          options={optionsRef.value}
+          onSelect={handleSelectRef.value}
+        >
+          {{
+            default: () => (
+              <NBaseIcon
+                clsPrefix={clsPrefix}
+                class={`${clsPrefix}-data-table-check-extra`}
+              >
+                {{
+                  default: () => <ChevronDownIcon />
+                }}
+              </NBaseIcon>
+            )
+          }}
+        </NDropdown>
      )
    }
-  },
-  render () {
-    const { clsPrefix } = this
-    return (
-      <NDropdown options={this.options} onSelect={this.handleSelect}>
-        {{
-          default: () => (
-            <NBaseIcon
-              clsPrefix={clsPrefix}
-              class={`${clsPrefix}-data-table-check-extra`}
-            >
-              {{
-                default: () => <ChevronDownIcon />
-              }}
-            </NBaseIcon>
-          )
-        }}
-      </NDropdown>
-    )
  }
 })
--- a/src/data-table/src/interface.ts
+++ b/src/data-table/src/interface.ts
@ -1,13 +1,156 @@
 import { TreeNode } from 'treemate'
-import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue'
+import {
+  CSSProperties,
+  Ref,
+  HTMLAttributes,
+  Slots,
+  PropType,
+  ExtractPropTypes,
+  VNodeChild
+} from 'vue'
 import type { ScrollTo } from '../../scrollbar/src/Scrollbar'
 import type { EllipsisProps } from '../../ellipsis/src/Ellipsis'
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import type { NLocale } from '../../locales'
-import type { MergedTheme } from '../../_mixins'
+import type { MergedTheme, ThemeProps } from '../../_mixins'
+import { useTheme } from '../../_mixins'
 import { createInjectionKey } from '../../_utils'
+import type { PaginationProps } from '../../pagination'
 import type { DataTableTheme } from '../styles'
 import type { RowItem, ColItem } from './use-group-header'
-import type { DataTableSelectionOption } from './TableParts/SelectionMenu'
+
+export const dataTableProps = {
+  ...(useTheme.props as ThemeProps<DataTableTheme>),
+  pagination: {
+    type: [Object, Boolean] as PropType<false | PaginationProps>,
+    default: false
+  },
+  paginateSinglePage: {
+    type: Boolean,
+    default: true
+  },
+  minHeight: [Number, String] as PropType<string | number>,
+  maxHeight: [Number, String] as PropType<string | number>,
+  // Use any type as row data to make prop data acceptable
+  columns: {
+    type: Array as PropType<TableColumns<any>>,
+    default: () => []
+  },
+  rowClassName: [String, Function] as PropType<
+  string | CreateRowClassName<any>
+  >,
+  rowProps: Function as PropType<CreateRowProps<any>>,
+  rowKey: Function as PropType<CreateRowKey<any>>,
+  summary: [Function] as PropType<CreateSummary<any>>,
+  data: {
+    type: Array as PropType<RowData[]>,
+    default: () => []
+  },
+  loading: Boolean,
+  bordered: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
+  },
+  bottomBordered: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
+  },
+  striped: Boolean,
+  scrollX: [Number, String] as PropType<string | number>,
+  defaultCheckedRowKeys: {
+    type: Array as PropType<RowKey[]>,
+    default: () => []
+  },
+  checkedRowKeys: Array as PropType<RowKey[]>,
+  singleLine: {
+    type: Boolean,
+    default: true
+  },
+  singleColumn: Boolean,
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'medium'
+  },
+  remote: Boolean,
+  defaultExpandedRowKeys: {
+    type: Array as PropType<RowKey[]>,
+    default: []
+  },
+  defaultExpandAll: Boolean,
+  expandedRowKeys: Array as PropType<RowKey[]>,
+  stickyExpandedRows: Boolean,
+  virtualScroll: Boolean,
+  tableLayout: {
+    type: String as PropType<'auto' | 'fixed'>,
+    default: 'auto'
+  },
+  allowCheckingNotLoaded: Boolean,
+  cascade: {
+    type: Boolean,
+    default: true
+  },
+  childrenKey: {
+    type: String,
+    default: 'children'
+  },
+  indent: {
+    type: Number,
+    default: 16
+  },
+  flexHeight: Boolean,
+  paginationBehaviorOnFilter: {
+    type: String as PropType<'first' | 'current'>,
+    default: 'current'
+  },
+  renderCell: Function as PropType<
+  (value: any, rowData: object, column: TableBaseColumn) => VNodeChild
+  >,
+  renderExpandIcon: Function as PropType<() => VNodeChild>,
+  onLoad: Function as PropType<DataTableOnLoad>,
+  'onUpdate:page': [Function, Array] as PropType<
+  PaginationProps['onUpdate:page']
+  >,
+  onUpdatePage: [Function, Array] as PropType<PaginationProps['onUpdate:page']>,
+  'onUpdate:pageSize': [Function, Array] as PropType<
+  PaginationProps['onUpdate:pageSize']
+  >,
+  onUpdatePageSize: [Function, Array] as PropType<
+  PaginationProps['onUpdate:pageSize']
+  >,
+  'onUpdate:sorter': [Function, Array] as PropType<MaybeArray<OnUpdateSorter>>,
+  onUpdateSorter: [Function, Array] as PropType<MaybeArray<OnUpdateSorter>>,
+  'onUpdate:filters': [Function, Array] as PropType<
+  MaybeArray<OnUpdateFilters>
+  >,
+  onUpdateFilters: [Function, Array] as PropType<MaybeArray<OnUpdateFilters>>,
+  'onUpdate:checkedRowKeys': [Function, Array] as PropType<
+  MaybeArray<OnUpdateCheckedRowKeys>
+  >,
+  onUpdateCheckedRowKeys: [Function, Array] as PropType<
+  MaybeArray<OnUpdateCheckedRowKeys>
+  >,
+  'onUpdate:expandedRowKeys': [Function, Array] as PropType<
+  MaybeArray<OnUpdateExpandedRowKeys>
+  >,
+  onUpdateExpandedRowKeys: [Function, Array] as PropType<
+  MaybeArray<OnUpdateExpandedRowKeys>
+  >,
+  onScroll: Function as PropType<(e: Event) => void>,
+  // deprecated
+  onPageChange: [Function, Array] as PropType<PaginationProps['onUpdate:page']>,
+  onPageSizeChange: [Function, Array] as PropType<
+  PaginationProps['onUpdate:pageSize']
+  >,
+  onSorterChange: [Function, Array] as PropType<
+  MaybeArray<OnUpdateSorter> | undefined
+  >,
+  onFiltersChange: [Function, Array] as PropType<
+  MaybeArray<OnUpdateFilters> | undefined
+  >,
+  onCheckedRowKeysChange: [Function, Array] as PropType<
+  MaybeArray<OnUpdateCheckedRowKeys> | undefined
+  >
+} as const

 export type FilterOptionValue = string | number
 export type ColumnKey = string | number
@ -167,6 +310,7 @@ export type DataTableSelectionOptions<T = InternalRowData> = Array<
 | { label: string, key: string | number, onSelect: (pageData: T[]) => void }
 >
 export interface DataTableInjection {
+  props: DataTableSetupProps
  slots: Slots
  indentRef: Ref<number>
  childTriggerColIndexRef: Ref<number>
@ -342,3 +486,8 @@ export interface SummaryRowData {
 }

 export type DataTableOnLoad = (node: RowData) => Promise<void>
+
+export type DataTableSelectionOption = 'all' | 'none'
+
+export type DataTableProps = ExtractPublicPropTypes<typeof dataTableProps>
+export type DataTableSetupProps = ExtractPropTypes<typeof dataTableProps>
--- a/src/data-table/src/use-check.ts
+++ b/src/data-table/src/use-check.ts
@ -1,6 +1,6 @@
 import { computed, ComputedRef, ref } from 'vue'
-import type { DataTableSetupProps } from './DataTable'
 import type {
+  DataTableSetupProps,
  RowKey,
  TableSelectionColumn,
  InternalRowData,
--- a/src/data-table/src/use-expand.ts
+++ b/src/data-table/src/use-expand.ts
@ -1,8 +1,12 @@
 import { toRef, ref, Ref } from 'vue'
 import { useMemo, useMergedState } from 'vooks'
 import { TreeMate } from 'treemate'
-import type { DataTableSetupProps } from './DataTable'
-import type { Expandable, InternalRowData, RowKey } from './interface'
+import type {
+  Expandable,
+  InternalRowData,
+  RowKey,
+  DataTableSetupProps
+} from './interface'
 import { call, warn } from '../../_utils'

 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
--- a/src/data-table/src/use-group-header.ts
+++ b/src/data-table/src/use-group-header.ts
@ -1,11 +1,11 @@
 import { CSSProperties, ComputedRef, computed } from 'vue'
-import type { DataTableSetupProps } from './DataTable'
 import type {
  TableExpandColumn,
  TableSelectionColumn,
  TableColumn,
  TableBaseColumn,
-  TableColumns
+  TableColumns,
+  DataTableSetupProps
 } from './interface'
 import { getColKey, createCustomWidthStyle } from './utils'

--- a/src/data-table/src/use-scroll.ts
+++ b/src/data-table/src/use-scroll.ts
@ -1,8 +1,12 @@
 import { beforeNextFrameOnce } from 'seemly'
 import { computed, ComputedRef, watch, Ref, ref } from 'vue'
 import { formatLength } from '../../_utils'
-import type { DataTableSetupProps } from './DataTable'
-import type { ColumnKey, MainTableRef, TableColumn } from './interface'
+import type {
+  ColumnKey,
+  MainTableRef,
+  TableColumn,
+  DataTableSetupProps
+} from './interface'
 import { getNumberColWidth, getColKey } from './utils'

 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
--- a/src/data-table/src/use-sorter.ts
+++ b/src/data-table/src/use-sorter.ts
@ -1,4 +1,5 @@
 import { computed, ref, ComputedRef } from 'vue'
+import { call } from '../../_utils'
 import type {
  ColumnKey,
  InternalRowData,
@ -9,11 +10,10 @@ import type {
  TableExpandColumn,
  TableSelectionColumn,
  CompareFn,
-  OnUpdateSorterImpl
+  OnUpdateSorterImpl,
+  DataTableSetupProps
 } from './interface'
 import { getFlagOfOrder } from './utils'
-import { call } from '../../_utils'
-import type { DataTableSetupProps } from './DataTable'

 function getMultiplePriority (
  sorter: TableBaseColumn['sorter']
--- a/src/data-table/src/use-table-data.ts
+++ b/src/data-table/src/use-table-data.ts
@ -1,7 +1,8 @@
 import { computed, ref, ComputedRef } from 'vue'
 import { useMemo, useMergedState } from 'vooks'
 import { createTreeMate } from 'treemate'
-import type { DataTableSetupProps } from './DataTable'
+import type { PaginationProps } from '../../pagination/src/Pagination'
+import { call, warn } from '../../_utils'
 import type {
  ColumnKey,
  Filter,
@ -12,14 +13,13 @@ import type {
  InternalRowData,
  TmNode,
  TableExpandColumn,
-  RowKey
+  RowKey,
+  DataTableSetupProps
 } from './interface'
 import { createShallowClonedObject } from './utils'
-import type { PaginationProps } from '../../pagination/src/Pagination'
-import { call, warn } from '../../_utils'
 import { useSorter } from './use-sorter'
-// useTableData combines filter, sorter and pagination

+// useTableData combines filter, sorter and pagination
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function useTableData (
  props: DataTableSetupProps,
--- a/src/data-table/styles/dark.ts
+++ b/src/data-table/styles/dark.ts
@ -6,6 +6,7 @@ import { paginationDark } from '../../pagination/styles'
 import { scrollbarDark } from '../../_internal/scrollbar/styles'
 import { popoverDark } from '../../popover/styles'
 import { emptyDark } from '../../empty/styles'
+import { dropdownDark } from '../../dropdown/styles'
 import { commonDark } from '../../_styles/common'
 import type { DataTableTheme } from './light'
 import { self } from './light'
@ -21,7 +22,8 @@ const dataTableDark: DataTableTheme = {
    Scrollbar: scrollbarDark,
    Empty: emptyDark,
    Popover: popoverDark,
-    Ellipsis: ellipsisDark
+    Ellipsis: ellipsisDark,
+    Dropdown: dropdownDark
  },
  self (vars) {
    const commonSelf = self(vars)
--- a/src/data-table/styles/light.ts
+++ b/src/data-table/styles/light.ts
@ -8,6 +8,7 @@ import { paginationLight } from '../../pagination/styles'
 import { scrollbarLight } from '../../_internal/scrollbar/styles'
 import { popoverLight } from '../../popover/styles'
 import { emptyLight } from '../../empty/styles'
+import { dropdownLight } from '../../dropdown/styles'
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
 import { createTheme } from '../../_mixins'
@ -99,7 +100,8 @@ const dataTableLight = createTheme({
    Scrollbar: scrollbarLight,
    Empty: emptyLight,
    Popover: popoverLight,
-    Ellipsis: ellipsisLight
+    Ellipsis: ellipsisLight,
+    Dropdown: dropdownLight
  },
  self
 })
--- a/src/descriptions/src/utils.ts
+++ b/src/descriptions/src/utils.ts
@ -1,6 +1,6 @@
 import { VNodeChild } from 'vue'

-export const DESCRIPTION_ITEM_FLAG = Symbol('DESCRIPTION_ITEM_FLAG')
+export const DESCRIPTION_ITEM_FLAG = 'DESCRIPTION_ITEM_FLAG'

 export function isDescriptionsItem (vNode: VNodeChild): boolean {
  if (typeof vNode === 'object' && vNode && !Array.isArray(vNode)) {