[CSS] tsx 내의 string에서 줄바꿈이 안되는 문제 해결

const MyComponent = () => {....
return(
<ChallengeInfo
    index={2}
    title="Schedule"
    content={"Sep 11st -\nOct 11st"}
/>)}

const ChallengeInfo = ({ index, title, content }: IndexTitleContentProps) => {
  return (
    <ChallengeInfoWrapper index={index}>
      <ChallengeInfoTitle>{title}</ChallengeInfoTitle>
      <ChallengeInfoContent style={{ whiteSpace: "pre-line" }}>
        {content}
      </ChallengeInfoContent>
    </ChallengeInfoWrapper>
  );
};

대충 요런 구조였다.

원래는 아무리해도 content의 내용에 줄바꿈이 적용이 안됐는데 이렇게

style={{ whiteSpace: "pre-line" }}

을 해주니까 content의 \n이 잘 작동했다.