From b3be6853086c65b91cd2c166d6d81abeae27abd9 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 9 Feb 2024 19:03:01 -0600 Subject: [PATCH] small mrt theme refactor --- .../docs/guides/customize-components.mdx | 2 - .../src/components/body/MRT_TableBodyCell.tsx | 5 +-- .../body/MRT_TableBodyCellValue.tsx | 9 +++-- .../src/components/body/MRT_TableBodyRow.tsx | 12 +++--- .../components/body/MRT_TableDetailPanel.tsx | 6 +-- .../components/footer/MRT_TableFooterRow.tsx | 9 +++-- .../src/components/head/MRT_TableHeadCell.tsx | 5 +-- .../src/components/head/MRT_TableHeadRow.tsx | 10 +++-- .../components/menus/MRT_CellActionMenu.tsx | 6 +-- .../components/menus/MRT_ColumnActionMenu.tsx | 6 +-- .../components/menus/MRT_FilterOptionMenu.tsx | 6 +-- .../components/menus/MRT_RowActionMenu.tsx | 6 +-- .../menus/MRT_ShowHideColumnsMenu.tsx | 6 +-- .../menus/MRT_ShowHideColumnsMenuItems.tsx | 5 ++- .../table/MRT_TableLoadingOverlay.tsx | 16 ++++---- .../src/components/table/MRT_TablePaper.tsx | 4 +- .../src/hooks/useMRT_TableOptions.ts | 4 ++ packages/material-react-table/src/types.ts | 28 +++++++------- .../src/utils/style.utils.ts | 37 ++++++++++--------- .../features/ColumnGrouping.stories.tsx | 8 +--- 20 files changed, 86 insertions(+), 104 deletions(-) diff --git a/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx b/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx index 691521a5e..f7922e686 100644 --- a/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/customize-components.mdx @@ -314,7 +314,6 @@ The default background color of the table toolbars and table are controlled by t Here is the default `mrtTheme` object used internally if not overridden: ```jsx -const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme); const baseBackgroundColor = themeOverrides?.baseBackgroundColor ?? (theme.palette.mode === 'dark' @@ -330,7 +329,6 @@ return { menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2), - ...themeOverrides, }; ``` diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx index 140e99b45..c3d996df7 100644 --- a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx +++ b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx @@ -18,7 +18,7 @@ import { } from '../../types'; import { isCellEditable, openEditingCell } from '../../utils/cell.utils'; import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils'; -import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils'; +import { getCommonMRTCellStyles } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; import { MRT_CopyButton } from '../buttons/MRT_CopyButton'; import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField'; @@ -56,6 +56,7 @@ export const MRT_TableBodyCell = ({ enableColumnPinning, enableGrouping, layoutMode, + mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, @@ -93,8 +94,6 @@ export const MRT_TableBodyCell = ({ table, }); - const { draggingBorderColor } = getMRTTheme(table, theme); - const [skeletonWidth, setSkeletonWidth] = useState(100); useEffect(() => { if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return; diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx index ce8d64ccc..1b282ecaa 100644 --- a/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx +++ b/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx @@ -5,7 +5,6 @@ import { type MRT_RowData, type MRT_TableInstance, } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; import highlightWords from 'highlight-words'; const allowedTypes = ['string', 'number']; @@ -27,7 +26,10 @@ export const MRT_TableBodyCellValue = ({ }: MRT_TableBodyCellValueProps) => { const { getState, - options: { enableFilterMatchHighlighting }, + options: { + enableFilterMatchHighlighting, + mrtTheme: { matchHighlightColor }, + }, } = table; const { column, row } = cell; const { columnDef } = column; @@ -88,8 +90,7 @@ export const MRT_TableBodyCellValue = ({ sx={ match ? { - backgroundColor: (theme) => - getMRTTheme(table, theme).matchHighlightColor, + backgroundColor: matchHighlightColor, borderRadius: '2px', color: (theme) => theme.palette.mode === 'dark' diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx index 5812d4a77..c2f5cea51 100644 --- a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx +++ b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx @@ -23,7 +23,6 @@ import { getIsRowSelected } from '../../utils/row.utils'; import { commonCellBeforeAfterStyles, getCommonPinnedCellStyles, - getMRTTheme, } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; @@ -61,6 +60,11 @@ export const MRT_TableBodyRow = ({ enableStickyHeader, layoutMode, memoMode, + mrtTheme: { + baseBackgroundColor, + pinnedRowBackgroundColor, + selectedRowBackgroundColor, + }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, @@ -138,12 +142,6 @@ export const MRT_TableBodyRow = ({ const rowRef = useRef(null); - const { - baseBackgroundColor, - pinnedRowBackgroundColor, - selectedRowBackgroundColor, - } = getMRTTheme(table, theme); - const cellHighlightColor = isRowSelected ? selectedRowBackgroundColor : isRowPinned diff --git a/packages/material-react-table/src/components/body/MRT_TableDetailPanel.tsx b/packages/material-react-table/src/components/body/MRT_TableDetailPanel.tsx index 62b91a6f4..ef72ec3cf 100644 --- a/packages/material-react-table/src/components/body/MRT_TableDetailPanel.tsx +++ b/packages/material-react-table/src/components/body/MRT_TableDetailPanel.tsx @@ -9,7 +9,6 @@ import { type MRT_TableInstance, type MRT_VirtualItem, } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_TableDetailPanelProps @@ -37,6 +36,7 @@ export const MRT_TableDetailPanel = ({ options: { enableRowVirtualization, layoutMode, + mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, @@ -89,9 +89,7 @@ export const MRT_TableDetailPanel = ({ colSpan={getVisibleLeafColumns().length} {...tableCellProps} sx={(theme) => ({ - backgroundColor: virtualRow - ? getMRTTheme(table, theme).baseBackgroundColor - : undefined, + backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode?.startsWith('grid') ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, diff --git a/packages/material-react-table/src/components/footer/MRT_TableFooterRow.tsx b/packages/material-react-table/src/components/footer/MRT_TableFooterRow.tsx index a9b1e560c..2e06f3377 100644 --- a/packages/material-react-table/src/components/footer/MRT_TableFooterRow.tsx +++ b/packages/material-react-table/src/components/footer/MRT_TableFooterRow.tsx @@ -8,7 +8,6 @@ import { type MRT_TableInstance, type MRT_VirtualItem, } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_TableFooterRowProps @@ -25,7 +24,11 @@ export const MRT_TableFooterRow = ({ ...rest }: MRT_TableFooterRowProps) => { const { - options: { layoutMode, muiTableFooterRowProps }, + options: { + layoutMode, + mrtTheme: { baseBackgroundColor }, + muiTableFooterRowProps, + }, } = table; const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = @@ -55,7 +58,7 @@ export const MRT_TableFooterRow = ({ ({ - backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, + backgroundColor: baseBackgroundColor, display: layoutMode?.startsWith('grid') ? 'flex' : undefined, position: 'relative', width: '100%', diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx index ce9fef083..00f1fc399 100644 --- a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx +++ b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx @@ -15,7 +15,7 @@ import { type MRT_RowData, type MRT_TableInstance, } from '../../types'; -import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils'; +import { getCommonMRTCellStyles } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_TableHeadCellProps @@ -47,6 +47,7 @@ export const MRT_TableHeadCell = ({ enableGrouping, enableMultiSort, layoutMode, + mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, @@ -73,8 +74,6 @@ export const MRT_TableHeadCell = ({ ...rest, }; - const { draggingBorderColor } = getMRTTheme(table, theme); - const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== 'group' && diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx index f931904df..74e0b089d 100644 --- a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx +++ b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx @@ -9,7 +9,6 @@ import { type MRT_TableInstance, type MRT_VirtualItem, } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_TableHeadRowProps @@ -26,7 +25,12 @@ export const MRT_TableHeadRow = ({ ...rest }: MRT_TableHeadRowProps) => { const { - options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, + options: { + enableStickyHeader, + layoutMode, + mrtTheme: { baseBackgroundColor }, + muiTableHeadRowProps, + }, } = table; const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = @@ -44,7 +48,7 @@ export const MRT_TableHeadRow = ({ ({ - backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, + backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode?.startsWith('grid') ? 'flex' : undefined, position: diff --git a/packages/material-react-table/src/components/menus/MRT_CellActionMenu.tsx b/packages/material-react-table/src/components/menus/MRT_CellActionMenu.tsx index da8dd872e..64fc08fc6 100644 --- a/packages/material-react-table/src/components/menus/MRT_CellActionMenu.tsx +++ b/packages/material-react-table/src/components/menus/MRT_CellActionMenu.tsx @@ -1,9 +1,7 @@ import Menu, { type MenuProps } from '@mui/material/Menu'; -import { useTheme } from '@mui/material/styles'; import { MRT_ActionMenuItem } from './MRT_ActionMenuItem'; import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { openEditingCell } from '../../utils/cell.utils'; -import { getMRTTheme } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_CellActionMenuProps @@ -23,6 +21,7 @@ export const MRT_CellActionMenu = ({ enableEditing, icons: { ContentCopy, EditIcon }, localization, + mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, @@ -33,9 +32,6 @@ export const MRT_CellActionMenu = ({ const { column } = cell; const { columnDef } = column; - const theme = useTheme(); - const { menuBackgroundColor } = getMRTTheme(table, theme); - const handleClose = (event?: any) => { event?.stopPropagation(); table.setActionCell(null); diff --git a/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx index 36af30448..cbb14566a 100644 --- a/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx +++ b/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx @@ -1,6 +1,5 @@ import { type MouseEvent, useState } from 'react'; import Menu, { type MenuProps } from '@mui/material/Menu'; -import { useTheme } from '@mui/material/styles'; import { MRT_ActionMenuItem } from './MRT_ActionMenuItem'; import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu'; import { @@ -8,7 +7,6 @@ import { type MRT_RowData, type MRT_TableInstance, } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; export interface MRT_ColumnActionMenuProps extends Partial { @@ -51,6 +49,7 @@ export const MRT_ColumnActionMenu = ({ VisibilityOffIcon, }, localization, + mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, @@ -318,9 +317,6 @@ export const MRT_ColumnActionMenu = ({ : []), ].filter(Boolean); - const theme = useTheme(); - const { menuBackgroundColor } = getMRTTheme(table, theme); - return ( ({ columnFilterModeOptions, globalFilterModeOptions, localization, + mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, @@ -239,9 +238,6 @@ export const MRT_FilterOptionMenu = ({ const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn; - const theme = useTheme(); - const { menuBackgroundColor } = getMRTTheme(table, theme); - return ( @@ -36,14 +34,12 @@ export const MRT_RowActionMenu = ({ enableEditing, icons: { EditIcon }, localization, + mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table; const { density } = getState(); - const theme = useTheme(); - const { menuBackgroundColor } = getMRTTheme(table, theme); - return ( extends Partial { @@ -42,6 +40,7 @@ export const MRT_ShowHideColumnsMenu = ({ enableColumnPinning, enableHiding, localization, + mrtTheme: { menuBackgroundColor }, }, } = table; const { columnOrder, columnPinning, density } = getState(); @@ -84,9 +83,6 @@ export const MRT_ShowHideColumnsMenu = ({ null, ); - const theme = useTheme(); - const { menuBackgroundColor } = getMRTTheme(table, theme); - return ( ({ enableColumnPinning, enableHiding, localization, + mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table; @@ -116,7 +117,7 @@ export const MRT_ShowHideColumnsMenuItems = ({ outline: isDragging ? `2px dashed ${theme.palette.grey[500]}` : hoveredColumn?.id === column.id - ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}` + ? `2px dashed ${draggingBorderColor}` : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, diff --git a/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx b/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx index 7ae27f7f3..30f4a3158 100644 --- a/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx +++ b/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx @@ -4,7 +4,6 @@ import CircularProgress, { } from '@mui/material/CircularProgress'; import { alpha } from '@mui/material/styles'; import { type MRT_RowData, type MRT_TableInstance } from '../../types'; -import { getMRTTheme } from '../../utils/style.utils'; import { parseFromValuesOrFunc } from '../../utils/utils'; export interface MRT_TableLoadingOverlayProps @@ -17,7 +16,11 @@ export const MRT_TableLoadingOverlay = ({ ...rest }: MRT_TableLoadingOverlayProps) => { const { - options: { localization, muiCircularProgressProps }, + options: { + localization, + mrtTheme: { baseBackgroundColor }, + muiCircularProgressProps, + }, } = table; const circularProgressProps = { @@ -27,12 +30,9 @@ export const MRT_TableLoadingOverlay = ({ return ( ({ + sx={{ alignItems: 'center', - backgroundColor: alpha( - getMRTTheme(table, theme).baseBackgroundColor, - 0.5, - ), + backgroundColor: alpha(baseBackgroundColor, 0.5), bottom: 0, display: 'flex', justifyContent: 'center', @@ -43,7 +43,7 @@ export const MRT_TableLoadingOverlay = ({ top: 0, width: '100%', zIndex: 3, - })} + }} > {circularProgressProps?.Component ?? ( ({ options: { enableBottomToolbar, enableTopToolbar, + mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, @@ -64,7 +64,7 @@ export const MRT_TablePaper = ({ ...paperProps?.style, }} sx={(theme) => ({ - backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, + backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out', diff --git a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts index 529dc0d0c..62ec13050 100644 --- a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts +++ b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts @@ -21,6 +21,7 @@ import { type MRT_RowData, type MRT_TableOptions, } from '../types'; +import { getMRTTheme } from '../utils/style.utils'; export const MRT_DefaultColumn = { filterVariant: 'text', @@ -96,6 +97,7 @@ export const useMRT_TableOptions: ( manualGrouping, manualPagination, manualSorting, + mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', @@ -120,6 +122,7 @@ export const useMRT_TableOptions: ( }), [localization], ); + mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]); aggregationFns = useMemo( () => ({ ...MRT_AggregationFns, ...aggregationFns }), [], @@ -241,6 +244,7 @@ export const useMRT_TableOptions: ( manualGrouping, manualPagination, manualSorting, + mrtTheme, paginationDisplayMode, positionActionsColumn, positionCreatingRow, diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts index 282a9bbe6..69d56785a 100644 --- a/packages/material-react-table/src/types.ts +++ b/packages/material-react-table/src/types.ts @@ -1,5 +1,4 @@ import { - type CSSProperties, type Dispatch, type MutableRefObject, type ReactNode, @@ -257,12 +256,12 @@ export interface MRT_Localization { } export interface MRT_Theme { - baseBackgroundColor?: CSSProperties['backgroundColor']; - draggingBorderColor?: CSSProperties['borderColor']; - matchHighlightColor?: CSSProperties['backgroundColor']; - menuBackgroundColor?: CSSProperties['backgroundColor']; - pinnedRowBackgroundColor?: CSSProperties['backgroundColor']; - selectedRowBackgroundColor?: CSSProperties['backgroundColor']; + baseBackgroundColor: string; + draggingBorderColor: string; + matchHighlightColor: string; + menuBackgroundColor: string; + pinnedRowBackgroundColor: string; + selectedRowBackgroundColor: string; } export interface MRT_RowModel { @@ -348,11 +347,14 @@ export type MRT_TableInstance = Omit< setShowToolbarDropZone: Dispatch>; }; -export type MRT_DefinedTableOptions = - MRT_TableOptions & { - icons: MRT_Icons; - localization: MRT_Localization; - }; +export type MRT_DefinedTableOptions = Omit< + MRT_TableOptions, + 'icons' | 'localization' | 'mrtTheme' +> & { + icons: MRT_Icons; + localization: MRT_Localization; + mrtTheme: Required; +}; export type MRT_StatefulTableOptions = MRT_DefinedTableOptions & { @@ -914,7 +916,7 @@ export type MRT_TableOptions = Omit< * @link https://www.material-react-table.com/docs/guides/memoize-components */ memoMode?: 'cells' | 'rows' | 'table-body'; - mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme; + mrtTheme?: ((theme: Theme) => Partial) | Partial; muiBottomToolbarProps?: | ((props: { table: MRT_TableInstance }) => BoxProps) | BoxProps; diff --git a/packages/material-react-table/src/utils/style.utils.ts b/packages/material-react-table/src/utils/style.utils.ts index 63ab370ff..a4cbd9130 100644 --- a/packages/material-react-table/src/utils/style.utils.ts +++ b/packages/material-react-table/src/utils/style.utils.ts @@ -8,6 +8,8 @@ import { type MRT_Header, type MRT_RowData, type MRT_TableInstance, + type MRT_TableOptions, + type MRT_Theme, } from '../types'; import { getIsFirstRightPinnedColumn, @@ -19,26 +21,26 @@ import { parseFromValuesOrFunc } from './utils'; export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_'); export const getMRTTheme = ( - table: MRT_TableInstance, - theme: Theme, -) => { - const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme); + mrtTheme: MRT_TableOptions['mrtTheme'], + muiTheme: Theme, +): MRT_Theme => { + const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme); const baseBackgroundColor = - themeOverrides?.baseBackgroundColor ?? - (theme.palette.mode === 'dark' - ? lighten(theme.palette.background.default, 0.05) - : theme.palette.background.default); + mrtThemeOverrides?.baseBackgroundColor ?? + (muiTheme.palette.mode === 'dark' + ? lighten(muiTheme.palette.background.default, 0.05) + : muiTheme.palette.background.default); return { baseBackgroundColor, - draggingBorderColor: theme.palette.primary.main, + draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: - theme.palette.mode === 'dark' - ? darken(theme.palette.warning.dark, 0.25) - : lighten(theme.palette.warning.light, 0.5), + muiTheme.palette.mode === 'dark' + ? darken(muiTheme.palette.warning.dark, 0.25) + : lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), - pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), - selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2), - ...themeOverrides, + pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1), + selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2), + ...mrtThemeOverrides, }; }; @@ -61,7 +63,7 @@ export const getCommonPinnedCellStyles = ({ table: MRT_TableInstance; theme: Theme; }) => { - const { baseBackgroundColor } = getMRTTheme(table, theme); + const { baseBackgroundColor } = table.options.mrtTheme; return { '&[data-pinned="true"]': { '&:before': { @@ -179,13 +181,12 @@ export const getCommonMRTCellStyles = ({ export const getCommonToolbarStyles = ({ table, - theme, }: { table: MRT_TableInstance; theme: Theme; }) => ({ alignItems: 'flex-start', - backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, + backgroundColor: table.options.mrtTheme.baseBackgroundColor, display: 'grid', flexWrap: 'wrap-reverse', minHeight: '3.5rem', diff --git a/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx index d64a91ebb..4ffad0838 100644 --- a/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx +++ b/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx @@ -290,13 +290,7 @@ export const GroupingColumnsSetState = () => { ]); }, []); - return ( - - ); + return ; }; export const ColumnGroupingDropZoneAlwaysVisible = () => {