如何让文本在图标下换行？

Answer 1

实现此目的的方法是使用 flexDirection，因为您使用的是 flex 并将其设置为

column

，因为

flexDirection

的默认值为

row

。

<Box
  sx={{
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 2,
    flexWrap: "wrap",
  }}
>
  <FolderIcon />
  <Typography variant="h6" sx={{ flex: 1 }}>
    {resourceCategory.name}
  </Typography>
</Box>