Css 卡片中的TableCell文本在React中溢出

我有一张桌子卡里面的桌子，我的桌子单元格有问题。如果单词太长，它将水平溢出。我怎样才能把它转到下一行？请看“代码”，因为它溢出了

请在这里查看我的代码沙盒

日期
{订单日期}
代码
{order.code}
时间
{order.time}
产品
{order.product}

使用

分词：分词

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

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

const useStyles=makeStyles({
包装电池：{
断字：“断字”
}
});
{order.code}


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

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