我在表格卡中有一個(gè)表格，但它的表格單元格有問題。如果單詞太長，它就會橫向溢出。我怎么把它換成下一行呢？請參閱& quot代碼& quot因?yàn)樗簽E了

請點(diǎn)擊這里看我的代碼沙箱

<TableBody>
          <TableRow>
            <TableCell variant="head">Date</TableCell>
            <TableCell variant="body">{order.date}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell variant="head">Code</TableCell>
            <TableCell variant="body">{order.code}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell variant="head">Time</TableCell>
            <TableCell variant="body">{order.time}</TableCell>
          </TableRow>
          <TableRow>
            <TableCell variant="head">Product</TableCell>
            <TableCell variant="body">{order.product}</TableCell>
          </TableRow>
        </TableBody>

使用斷詞:斷詞

const useStyles = makeStyles({
  wrapTableCell: {
    wordBreak: "break-word"
  }
});

<TableCell
  classes={{ root: classes.wrapTableCell }}
  variant="body"
>
  {order.code}
</TableCell>