Material-UI表行高到固定高度甚至内容在ReactJS中都很长

Material-UI是一个基于ReactJS的开源UI组件库，它提供了丰富的可重用组件和样式，用于构建现代化的Web应用程序。在Material-UI中，表行高度可以通过设置样式或使用特定的组件来实现固定高度或根据内容自动调整高度。

要实现固定表行高度，可以使用Table组件中的TableRow组件，并为其设置固定的高度样式。例如：

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';

const rows = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  // ...
];

const MyTable = () => {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Age</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} style={{ height: '50px' }}>
              <TableCell>{row.id}</TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell>{row.age}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default MyTable;

在上面的示例中，通过为TableRow组件设置样式style={{ height: '50px' }}，将表行高度固定为50像素。

如果要实现内容在ReactJS中都很长的情况下自动调整表行高度，可以使用TableCell组件的component="div"属性，并为其设置样式style={{ whiteSpace: 'normal' }}。这将使TableCell组件以div元素呈现，并根据内容自动调整高度。例如：

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';

const rows = [
  { id: 1, name: 'John Doe', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod.' },
  { id: 2, name: 'Jane Smith', description: 'Praesent euismod, justo vitae consectetur tincidunt, mauris justo.' },
  // ...
];

const MyTable = () => {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Description</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.id}</TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell component="div" style={{ whiteSpace: 'normal' }}>{row.description}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default MyTable;

在上面的示例中，通过将TableCell组件的component属性设置为"div"，并为其设置样式style={{ whiteSpace: 'normal' }}，使得描述内容可以根据实际长度自动调整表行高度。

Material-UI的官方文档提供了更详细的组件使用说明和示例代码，可以参考以下链接获取更多信息：