Fix row styling

packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css

@@ -2,37 +2,27 @@
   box-sizing: border-box;
   width: 100%;
   transition: all 100ms ease-in-out;
+  display: var(--display);
+}
 
-  &--layout-grid {
-    display: flex;
-  }
-
-  &--layout-table-row {
-    display: table-row;
-  }
-
-  &--virtual {
-    position: absolute;
-    top: 0;
-    transition: none !important;
-  }
-
-  &--hover {
-    td[data-selected="true"] {
-      @mixin hover {
-        background-color: var(--mantine-primary-color-filled)
-      }
+.MRT_TableBodyRowHover {
+  @mixin hover {
+    &[data-selected="true"] > td {
+      background-color: var(--mantine-primary-color-filled)
     }
-
-    td[data-selected="false"] {
-      @mixin hover {
-        @mixin light {
-          background-color: rgba(var(--mantine-color-white), 0.05);
-        }
+    &[data-selected="false"] > td {
         @mixin dark {
-          background-color: rgba(var(--mantine-color-dark-7), 0.12);
+          background-color: var(--dark-bg-color);
+        }
+        @mixin light {
+          background-color: var(--light-bg-color);
         }
-      }
     }
   }
 }
+
+.MRT_TableBodyRowVirtual {
+  position: absolute;
+  top: 0;
+  transition: none !important;
+}

packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,5 @@
 import { type DragEvent, memo, useRef } from 'react';
-import { Box } from '@mantine/core';
+import { Box, useMantineTheme, rgba } from '@mantine/core';
 import clsx from 'clsx';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
@@ -58,6 +58,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
   } = table;
   const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
     getState();
+  const theme = useMantineTheme();
 
   const tableRowProps = funcValue(mantineTableBodyRowProps, {
     row,
@@ -77,10 +78,8 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
     <>
       <Box
         className={clsx(
-          enableHover && classes.MRT_TableBodyRowHover,
-          layoutMode === 'grid'
-            ? classes.MRT_TableBodyRowLayoutGrid
-            : classes.MRT_TableBodyRowLayoutTableRow,
+          classes.MRT_TableBodyRow,
+          enableHover !== false && classes.MRT_TableBodyRowHover,
           virtualRow && classes.MRT_TableBodyRowVirtual,
           className,
         )}
@@ -95,6 +94,12 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
           }
         }}
         {...tableRowProps}
+        __vars={{
+          ...tableRowProps?.__vars,
+          '--display': layoutMode === 'grid' ? 'flex' : 'table-row',
+          '--light-bg-color': rgba(theme.colors.dark[7], 0.12),
+          '--dark-bg-color': rgba(theme.white, 0.05),
+        }}
         style={(theme) => ({
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,

packages/mantine-react-table/src/footer/MRT_TableFooter.module.css

@@ -1,24 +1,16 @@
-.MRT_TableFooter {
-  &--grid {
-    display: grid;
-  }
+.MRT_TableFooterSticky {
+  bottom: 0;
+  opacity: 0.97;
+  position: sticky;
+  z-index: 1;
 
-  &--table-row-group {
-    display: table-row-group;
+  @mixin light {
+    outline: 1px solid var(--mantine-color-gray-3);
   }
 
-  &--sticky {
-    bottom: 0;
-    opacity: 0.97;
-    position: sticky;
-    z-index: 1;
-
-    @mixin light {
-      outline: 1px solid var(--mantine-color-gray-3);
-    }
-
-    @mixin dark {
-      outline: 1px solid var(--mantine-color-gray-7);
-    }
+  @mixin dark {
+    outline: 1px solid var(--mantine-color-gray-7);
   }
 }
+
+

packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css

@@ -1,6 +1,6 @@
 .MRT_TableFooterCell {
   font-weight: bold;
-  padding: rem(9px);
+  padding: 1rem;
   vertical-align: top;
   z-index: var(--z-index);
   display: var(--display);

packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css

@@ -1,16 +1,10 @@
 .MRT_TableFooterRow {
   width: 100%;
-  @mixin light {
-    background-color: rgba(var(--mantine-color-white), 0.06);
-  }
+  display: var(--display);
   @mixin dark {
-    background-color: rgba(var(--mantine-color-dark-7), 0.06);
+    background-color: var(--dark-bg-color);
   }
-
-  &--grid {
-    display: grid;
-  }
-  &--table-row {
-    display: table-row;
+  @mixin light {
+    background-color: var(--light-bg-color);
   }
 }

packages/mantine-react-table/src/head/MRT_TableHeadCell.module.css

@@ -1,3 +1,18 @@
+.MRT_TableHeadCell {
+  flex-direction: var(--flex-direction);
+  font-weight: bold;
+  overflow: visible;
+  padding: var(--padding);
+  user-select: var(--user-select);
+  vertical-align: top;
+  z-index: var(--z-index);
+  @mixin hover {
+    .mantine-ActionIcon-root {
+      opacity: 1;
+    }
+  }
+}
+
 .content {
   align-items: flex-start;
   position: relative;

packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.module.css

@@ -1,9 +1,7 @@
-.MRT_TableHeadCellFilterLabel {
-  &-action-icon {
-    opacity: var(--opacity);
-    padding: rem(2px);
-    @mixin hover {
-      opacity: 1;
-    }
+.MRT_TableHeadCellFilterLabelActionIcon {
+  opacity: var(--opacity);
+  padding: 2px;
+  @mixin hover {
+    opacity: 1;
   }
 }

packages/mantine-react-table/src/head/MRT_TableHeadCellResizeHandle.module.css

@@ -2,20 +2,21 @@
   cursor: col-resize;
   margin-right: var(--margin-right);
   position: absolute;
-  rigth: rem(4px);
-  padding-left: rem(1px);
-  padding-right: rem(2px);
-  transfor: var(--transform);
+  right: 4px;
+  padding-left: 1px;
+  padding-right: 2px;
+  transform: var(--transform);
   &:active > .mantine-Divider-vertical {
     border-left-color: var(--mantine-color-default);
   }
-  &-divider {
-    border-radius: rem(2px);
-    border-width: rem(4px);
-    height: rem(24px);
-    touch-action: none;
-    transition: var(--transition);
-    user-select: none;
-    z-index: 4;
-  }
+}
+
+.MRT_TableHeadCellResizeHandleDivider {
+  border-radius: 2px;
+  border-width: 4px;
+  height: 24px;
+  touch-action: none;
+  transition: var(--transition);
+  user-select: none;
+  z-index: 4;
 }

packages/mantine-react-table/src/head/MRT_TableHeadRow.module.css

@@ -1,10 +1,6 @@
 .MRT_TableHeadRow {
-  box-shadow: 0 4px rgba(var(--mantine-color-black, 0.1));
+  box-shadow: 0 4px var(--box-shadow);
   display: var(--display);
-  &--sticky {
-    position: sticky;
-    top: 0;
-  };
   @mixin dark {
     background-color: var(--mantine-color-dark-7);
   }
@@ -13,3 +9,8 @@
     background-color: var(--mantine-color-white);
   }
 }
+
+.MRT_TableHeadRowSticky {
+  position: sticky;
+  top: 0;
+}

packages/mantine-react-table/src/inputs/MRT_GlobalFilterTextInput.module.css

@@ -1,13 +1,12 @@
 .MRT_GlobalFilterTextInput {
-  &-collapse {
-    & > div {
-      display: flex;
-      align-items: center;
-      gap: rem(16px);
-      flex-wrap: nowrap;
-    }
-  }
-  &-text-input {
-    min-width: rem(250px);
+  min-width: 250px;
+}
+
+.MRT_GlobalFilterTextInputCollapse {
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: nowrap;
   }
 }

packages/mantine-react-table/src/inputs/MRT_GlobalFilterTextInput.tsx

@@ -114,7 +114,7 @@ export const MRT_GlobalFilterTextInput = <
           }
         }}
         className={clsx(
-          classes.MRT_GlobalFilterTextInputTextInput,
+          classes.MRT_GlobalFilterTextInput,
           textFieldProps?.className,
         )}
         style={(theme) => ({