React中无需外部CSS文件为Material-Table添加hover行高亮样式的方法

架构老林

2026-10-2

实现方案说明

首先明确：原生行内样式（inline styling）不支持:hover这类伪类，所以没法直接用行内style实现需求，以下是3种无需外部CSS文件的可行方案，优先推荐和Material生态适配的方案：

方案1：使用Material-UI原生样式方案（最推荐）

如果你用的是Material-UI v4版本，用`useStyles`实现：

导入依赖

import { makeStyles } from '@material-ui/core/styles';
import MaterialTable, { MTableBodyRow } from 'material-table';

定义hover样式

const useStyles = makeStyles({
  hoverRow: {
    '&:hover': {
      backgroundColor: 'gray !important',
    }
  }
});

覆写表格行组件的样式

function YourTable() {
  const classes = useStyles();
  return (
    <MaterialTable
      // 这里保留你原来的表格title、columns、data等配置
      components={{
        Row: props => <MTableBodyRow {...props} className={classes.hoverRow} />
      }}
    />
  )
}

如果你用的是Material-UI v5版本，直接用`sx`属性更简洁：

import MaterialTable from 'material-table';
import { TableRow } from '@mui/material';

function YourTable() {
  return (
    <MaterialTable
      // 保留原有配置
      components={{
        Row: props => <TableRow {...props} sx={{
          '&:hover': { backgroundColor: 'gray !important' }
        }} />
      }}
    />
  )
}

方案2：JSX注入style标签（快速实现的轻量方案）

如果不想修改组件配置，可以直接在表格所在组件内插入带作用域限制的style标签，避免污染全局样式：

function YourTable() {
  return (
    <>
      <style>{`
        .MuiTable-root tr:hover {
          background: gray !important;
        }
      `}</style>
      <MaterialTable
        // 保留原有配置
      />
    </>
  )
}