Don't double highlight nested tables

KevinVandy · Jul 23, 2024 · 18f0f4b · 18f0f4b
1 parent 0264f46
commit 18f0f4b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
@@ -184,7 +184,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           ...tableRowProps?.style,
         }}
         sx={(theme: Theme) => ({
-          '&:hover td:after': cellHighlightColorHover
+          '&:hover > td:after': cellHighlightColorHover
             ? {
                 backgroundColor: alpha(cellHighlightColorHover, 0.3),
                 ...commonCellBeforeAfterStyles,

diff --git a/packages/material-react-table/stories/styling/TableBodyRowStyles.stories.tsx b/packages/material-react-table/stories/styling/TableBodyRowStyles.stories.tsx
@@ -24,8 +24,18 @@ const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
   {
     accessorKey: 'address',
     header: 'Address',
+    Cell: ({ cell }) => (
+      <table>
+        <tbody>
+          <tr>
+            <td>{cell.getValue<string>()}</td>
+          </tr>
+        </tbody>
+      </table>
+    )
   },
 ];
+
 const data = [...Array(21)].map(() => ({
   address: faker.location.streetAddress(),
   age: faker.number.int(80),