small mrt theme refactor

Author: KevinVandy

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,
 };
 ```
 

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 = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableGrouping,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiSkeletonProps,
       muiTableBodyCellProps,
     },
@@ -93,8 +94,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     table,
   });
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;

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 = <TData extends MRT_RowData>({
 }: MRT_TableBodyCellValueProps<TData>) => {
   const {
     getState,
-    options: { enableFilterMatchHighlighting },
+    options: {
+      enableFilterMatchHighlighting,
+      mrtTheme: { matchHighlightColor },
+    },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -88,8 +90,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
               sx={
                 match
                   ? {
-                      backgroundColor: (theme) =>
-                        getMRTTheme(table, theme).matchHighlightColor,
+                      backgroundColor: matchHighlightColor,
                       borderRadius: '2px',
                       color: (theme) =>
                         theme.palette.mode === 'dark'

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 = <TData extends MRT_RowData>({
       enableStickyHeader,
       layoutMode,
       memoMode,
+      mrtTheme: {
+        baseBackgroundColor,
+        pinnedRowBackgroundColor,
+        selectedRowBackgroundColor,
+      },
       muiTableBodyRowProps,
       renderDetailPanel,
       rowPinningDisplayMode,
@@ -138,12 +142,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
-  const {
-    baseBackgroundColor,
-    pinnedRowBackgroundColor,
-    selectedRowBackgroundColor,
-  } = getMRTTheme(table, theme);
-
   const cellHighlightColor = isRowSelected
     ? selectedRowBackgroundColor
     : isRowPinned

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<TData extends MRT_RowData>
@@ -37,6 +36,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     options: {
       enableRowVirtualization,
       layoutMode,
+      mrtTheme: { baseBackgroundColor },
       muiDetailPanelProps,
       muiTableBodyRowProps,
       renderDetailPanel,
@@ -89,9 +89,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         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,

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<TData extends MRT_RowData>
@@ -25,7 +24,11 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableFooterRowProps<TData>) => {
   const {
-    options: { layoutMode, muiTableFooterRowProps },
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableFooterRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -55,7 +58,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: 'relative',
         width: '100%',

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<TData extends MRT_RowData>
@@ -47,6 +47,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableGrouping,
       enableMultiSort,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiTableHeadCellProps,
     },
     refs: { tableHeadCellRefs },
@@ -73,8 +74,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const isColumnPinned =
     enableColumnPinning &&
     columnDef.columnDefType !== 'group' &&

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<TData extends MRT_RowData>
@@ -26,7 +25,12 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadRowProps<TData>) => {
   const {
-    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableHeadRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -44,7 +48,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        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:

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<TData extends MRT_RowData>
@@ -23,6 +21,7 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
       enableEditing,
       icons: { ContentCopy, EditIcon },
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderCellActionMenuItems,
     },
     refs: { actionCellRef },
@@ -33,9 +32,6 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   const { column } = cell;
   const { columnDef } = column;
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   const handleClose = (event?: any) => {
     event?.stopPropagation();
     table.setActionCell(null);

packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,14 +1,12 @@
 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 {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 
 export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
   extends Partial<MenuProps> {
@@ -51,6 +49,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
         VisibilityOffIcon,
       },
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
@@ -318,9 +317,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       : []),
   ].filter(Boolean);
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   return (
     <Menu
       MenuListProps={{