如何在具有材料表反应的行上获得悬停效果？答案

【问题标题】：How do I get hover effect on rows with material-table react?如何在具有材料表反应的行上获得悬停效果？
【发布时间】：2021-07-25 17:15:39
【问题描述】：

我使用了带有 react 的材料表来呈现我的数据。当我悬停在行上时，我想显示悬停效果和光标指针效果。但我什至在文档中都找不到。

简短-当光标悬停在该行上时，我想突出显示该行上的某些颜色。

注意：我也发现了一个类似的问题和答案here，但他们使用另一种状态来悬停，如果我增加像数千行这样的数据，这会降低性能。因此这是不好的做法，所以我在这里要求相同的替代解决方案。

这是我的密码箱link

下面我也粘贴了我的代码。

App.js

import React, { useState } from 'react';
import './App.css';
import MaterialTable from 'material-table'

const empList = [
  { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, city: "Bangalore" },
  { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 9812345678, city: "Chennai" },
  { id: 3, name: "David", email: 'david342@gmail.com', phone: 7896536289, city: "Jaipur" },
  { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9087654321, city: "Hyderabad" },
]

function App() {

  const [data, setData] = useState(empList)
  const columns = [
    { title: "ID", field: "id", editable: false },
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    { title: "Phone Number", field: 'phone', },
    { title: "City", field: "city", }
  ]


  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <h4 align='center'>Material Table with CRUD operation</h4>
      <MaterialTable
        title="Employee Data"
        data={data}
        columns={columns}
        editable={{
          onRowAdd: (newRow) => new Promise((resolve, reject) => {
            const updatedRows = [...data, { id: Math.floor(Math.random() * 100), ...newRow }]
            setTimeout(() => {
              setData(updatedRows)
              resolve()
            }, 2000)
          }),
          onRowDelete: selectedRow => new Promise((resolve, reject) => {
            const index = selectedRow.tableData.id;
            const updatedRows = [...data]
            updatedRows.splice(index, 1)
            setTimeout(() => {
              setData(updatedRows)
              resolve()
            }, 2000)
          }),
          onRowUpdate:(updatedRow,oldRow)=>new Promise((resolve,reject)=>{
            const index=oldRow.tableData.id;
            const updatedRows=[...data]
            updatedRows[index]=updatedRow
            setTimeout(() => {
              setData(updatedRows)
              resolve()
            }, 2000)
          })

        }}
        options={{
          actionsColumnIndex: -1, addRowPosition: "first"
        }}
      />
    </div>
  );
}

export default App;

【问题讨论】：

你为什么不用Table组件？
@MikeK 如果我使用 table 组件，那么我必须为 crud 操作和这种材料编写大量代码；-table 通过提供所有这些东西开箱即用来解决这个问题
如果你已经在你的 React 项目中使用 Material UI，添加 marerial-table 作为一个单独的库，（Material UI 在后台使用）没有任何意义，它只是膨胀你的项目。您应该阅读 Table 组件的文档，因为它非常简单，而且您不必编写比 marerial-table 更多的代码，真的。
@MikeK 实际上我在材料表中说过，如果我想编辑一行，我只需使用 actions 属性，它为我提供了编辑整行数据的能力。但是如何在材质UI表中实现同样的事情呢？请打开我的代码沙箱并点击编辑图标你会理解我的担忧:-)
使Table 组件可编辑不是问题。 3 秒的 Google 搜索让我找到了this

标签： javascript reactjs react-hooks material-ui material-table

【解决方案1】：

在你的 CSS 中添加

    tbody tr:hover {
  background-color: blue;
  color: white;
  cursor: pointer;
}

【讨论】：