在 material-ui 表中显示全角行

Question

我想在表格中显示一些数据，这是我的 JSX 代码：

const StudentsTable = (props) => {
  const classes = useStyles();
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>NR.</TableCell>
            <TableCell align="right">NUME</TableCell>
            <TableCell align="right">E-MAIL</TableCell>
            <TableCell align="right">NR.TELEFON</TableCell>
            <TableCell align="right">CLASA</TableCell>
            <TableCell align="right">ACTIUNI</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.students.length > 0 ? (
            props.students.map((student, i) => (
              <TableRow key={student.studentName}>
                <TableCell component="th" scope="row">
                  {i + 1}
                </TableCell>
                <TableCell align="right">{student.studentName}</TableCell>
                <TableCell align="right">{student.studentEmail}</TableCell>
                <TableCell align="right">{student.studentPhone}</TableCell>
                <TableCell align="right">{student.clasa}</TableCell>
                <TableCell align="center" className={classes.actionsCell}>
                  <BootstrapButton variant="primary" size="sm">
                    EDITARE
                  </BootstrapButton>
                  <BootstrapButton
                    variant="danger"
                    size="sm"
                    onClick={() => props.deleteStudent(student.studentName)}
                  >
                    STERGERE
                  </BootstrapButton>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <Typography variant="h5">
              NU EXISTA ELEVI ADAUGATI.{"\n"} PUTETI ADAUGA APASAND PE BUTONUL
              "ADAUGA ELEVI"
            </Typography>
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

当props.students它是一个空数组时，我想用以下消息返回一个全角行： NU EXISTA ELEVI ADAUGATI.{"\n"} PUTETI ADAUGA APASAND PE BUTONUL "ADAUGA ELEVI"但在我的应用程序中，表格看起来像这样： 如何解决？

Answer 1

在要渲染一整行的地方

利用

<TableRow><TableCell colSpan={6}>"your message"</TableCell></TableRow>