对材质UI TableRow上的涟漪效果使用ButtonBase

import React from 'react';
import { TableRow, TableCell, ButtonBase } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  ripple: {
    overflow: 'hidden',
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    '&:after': {
      content: '""',
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      opacity: 0,
      backgroundColor: theme.palette.action.focus,
      animation: '$rippleEffect 1s ease-out',
    },
  },
  '@keyframes rippleEffect': {
    '0%': {
      transform: 'scale(0)',
      opacity: 0.3,
    },
    '100%': {
      transform: 'scale(2)',
      opacity: 0,
    },
  },
}));

const MyTableRow = () => {
  const classes = useStyles();

  return (
    <TableRow>
      <TableCell>
        <ButtonBase className={classes.ripple}>
          {/* 表格内容 */}
        </ButtonBase>
      </TableCell>
      {/* 其他表格列 */}
    </TableRow>
  );
};