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 44bd7f9b5..980874105 100644 --- 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 = ({ ...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 index 4e430213f..14c7b68bf 100644 --- 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 }) => ( + + + + + + +
{cell.getValue()}
+ ) }, ]; + const data = [...Array(21)].map(() => ({ address: faker.location.streetAddress(), age: faker.number.int(80),