[Material Design] Material-UI(MUI) <줄바꿈, white-space : "pre-wrap" 속성>

아래와 같이 줄바꿈이 적용되게 하려고 합니다.

원하는 모습

 

현재 코드는 아래와 같습니다.

문제!!

import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";

<Box
    sx={{
      display: "flex",
      flexDirection: "column",
    }}
>
    <LightbulbOutlinedIcon/>
    {`과학
공학`}
</Box>

 

 

white-space 속성(pre, pre-wrap, pre-line 차이)

 

 

위 블로그 글을 참고하여 줄바꿈을 적용하기 위해 아래와 같이 작성할 수 있습니다.

  <Box
    sx={{
      display: "flex",
      flexDirection: "column",
      whiteSpace: "pre-wrap", // 속성 추가
    }}
  >
    {cont.icon}
    {`과학
공학`}
  </Box>