React Material UI Datagrid rowMouseEnter не срабатывает

MUI DataGrid не включает никаких функций событий, связанных с зависанием.
(У вас есть только такие функции, как onCellClick(), onCellEditStart(), onCellKeyDown(), ...)

Я думал о прослушивателе событий, таких как onMouseEnter и onMouseLeave, но, как упоминалось здесь , это вызовет так много рендеров.

Возможно, использование реквизита sx поможет стилизовать эти блоки с помощью :hover:

Что-то вроде:

function getColumns(theme) {
  return [
    {
      field: "id",
      headerName: "Actions",
      width: 150,
      renderCell: (params) => {
        return (
          <Box
            sx = {{
              display: "flex",
              justifyContent: "space-between",
              width: "100%",
              '&:hover button': {
                backgroundColor: theme.palette.success.main,
                border: '1px solid transparent',
                color: theme.palette.common.white,
              },
            }}
          >
            <Link
              href = "/properties/[id]"
              as = {`/properties/${params.row.original_doc || params.row.id}`}
            >
              <Button
                size = "small"
                variant = "outlined"
                startIcon = {<CalculateIcon />}
                sx = {{
                  borderColor: theme.palette.success.main,
                  '&:hover': {
                    backgroundColor: theme.palette.success.main,
                    borderColor: 'transparent',
                    color: theme.palette.common.white,
                  },
                }}
              >
                Analyze
              </Button>
            </Link>
          </Box>
        );
      },
    },
  ];
}

Связан с

<DataGrid
  onRowMouseEnter = {handleRowOver}
  // Other props
/>

(не rowMouseEnter)

Используя аналогичную идею, показанную в строке DataGrid:

<DataGrid
  // Other props
  slotProps = {{
    row: {
      onMouseEnter: (event) => handleRowOver(Number(event.currentTarget.getAttribute('data-id'))),
      onMouseLeave: () => console.info('Mouse left the row'),
    },
  }}
/>

с:

const handleRowOver = (rowId) => {
  console.info(`Row ${rowId} is being hovered over`);
};

При наведении курсора на строку в DataGrid будет вызываться функция handleRowOver, и вы сможете увидеть лог в консоли браузера.
Когда мышь покинет строку, анонимная функция напечатает сообщение. Эффект наведения для кнопки «Анализ» по-прежнему будет обрабатываться псевдоклассом :hover в реквизите sx.

Как упомянул @VonC в своем ответе, вы можете использовать slotProps для передачи реквизитов элементу строки, в частности onMouseEnter и onMouseLeave. Используя технику, описанную здесь, я смог довольно лаконично воспроизвести поведение, которого вы пытаетесь добиться.

Основная идея состоит в том, чтобы запустить событие внутри onMouseEnter и onMouseLeave, на которое мы подпишемся в нашем пользовательском компоненте кнопки.

Чтобы добиться изоляции событий между разными строками, мы включим идентификатор строки в имя события.

Запускать ваш компонент без контекста было сложно, поэтому для демонстрации принципа я сам построил минимальный DataGrid.

Вы можете увидеть живой пример здесь:

Код:

import React, { FC, useState, useEffect } from "react";
import Button from "@mui/material/Button";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import CalculateIcon from "@mui/icons-material/Calculate";

const CustomButtonElement: FC<{ rowId: number | string }> = ({ rowId }) => {
  const [rowHovered, setRowHovered] = useState(false);
  useEffect(() => {
    const handleCustomEvent = (e) => setRowHovered(e.detail.hovered);
    document.addEventListener(`row${rowId}HoverChange`, handleCustomEvent);
    // cleanup listener
    return () =>
      document.removeEventListener(`row${rowId}HoverChange`, handleCustomEvent);
  }, [rowId]);

  return (
    <Button variant = {rowHovered ? "outlined" : "contained"}>
      <CalculateIcon />
    </Button>
  );
};

export default function DataGridDemo() {
  const rows = [
    { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
    { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
    { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
    { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
    { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null }
  ];

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 90 },
    {
      field: "",
      headerName: "Action",
      renderCell: (params) => <CustomButtonElement rowId = {params.id} />
    },
    { field: "firstName", headerName: "First Name", width: 90 },
    { field: "lastName", headerName: "Last Name", width: 90 }
  ];

  const handleRowHovered = (event: React.MouseEvent<HTMLElement>) => {
    const rowId = event.currentTarget?.dataset?.id;
    document.dispatchEvent(
      new CustomEvent(`row${rowId}HoverChange`, { detail: { hovered: true } })
    );
  };

  const handleRowLeaved = (event: React.MouseEvent<HTMLElement>) => {
    const rowId = event.currentTarget?.dataset?.id;
    document.dispatchEvent(
      new CustomEvent(`row${rowId}HoverChange`, { detail: { hovered: false } })
    );
  };

  return (
    <DataGrid
      rows = {rows}
      columns = {columns}
      slotProps = {{
        row: {
          onMouseEnter: handleRowHovered,
          onMouseLeave: handleRowLeaved
        }
      }}
    />
  );
}

ОБНОВЛЯТЬ

Чтобы решить проблему потери состояния, когда компонент выходит из поля зрения (из-за размонтирования ), я добавил useEffect, который будет запускаться при каждом монтировании кнопки и проверять, находится ли мышь над элементом строки кнопки. Для этого я использую совпадения и объект apiRef для более нативного доступа к элементу строки DataGrid через его контекст.

Как оказалось, благодаря тому же apiRef и хуку useGridApiEventHandler можно подписаться на события более нативно (не создавая кастомные), поэтому код получается еще лаконичнее и выразительнее.

Обновленный код (вышеупомянутая Codesandbox также обновлена):

import React, { FC, useState, useEffect } from "react";
import Button from "@mui/material/Button";
import {
  DataGrid,
  GridColDef,
  GridEventListener,
  useGridApiContext,
  useGridApiEventHandler
} from "@mui/x-data-grid";
import CalculateIcon from "@mui/icons-material/Calculate";

const CustomButtonElement: FC<{ rowId: number | string }> = ({ rowId }) => {
  const [rowHovered, setRowHovered] = useState(false);
  const apiRef = useGridApiContext();

  // runs only "onComponentMount"
  useEffect(() => {
    if (apiRef.current.getRowElement(rowId).matches(":hover"))
      setRowHovered(true);
  }, []);

  const handleRowEnter: GridEventListener<"rowMouseEnter"> = ({ id }) =>
    id === rowId && setRowHovered(true);
  const handleRowLeave: GridEventListener<"rowMouseLeave"> = ({ id }) =>
    id === rowId && setRowHovered(false);

  useGridApiEventHandler(apiRef, "rowMouseEnter", handleRowEnter);
  useGridApiEventHandler(apiRef, "rowMouseLeave", handleRowLeave);

  return (
    <Button variant = {rowHovered ? "outlined" : "contained"}>
      <CalculateIcon />
    </Button>
  );
};

export default function DataGridDemo() {
  const rows = [
    { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
    { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
    { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
    { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
    { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null }
  ];

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 90 },
    {
      field: "",
      headerName: "Action",
      renderCell: (params) => <CustomButtonElement rowId = {params.id} />
    },
    { field: "firstName", headerName: "First Name", width: 90 },
    { field: "lastName", headerName: "Last Name", width: 90 },
    { field: "age", headerName: "Age", width: 90 }
  ];

  return <DataGrid rows = {rows} columns = {columns} />;
}