我目前正在进行一个涉及网站的小组项目，我的一个小组成员创建了一个ContentBlock组件，以帮助轻松地创建新页面（下面的组件）。我一直试图为网站创建一个新页面，我试图将一个带有换行符的字符串传递给组件，但它们无法正常工作。

export const ContentBlock = ({ title, content }: { title: string,  content: string }) => {
  
return (
    <div style={{ width: '100%', paddingTop: '20px', paddingRight: '10px'}}>
      
      {/* Block Header */}
      <h2 style={{
        borderBottom: '4px solid #A1DAFD',
        borderTop: '4px solid #A1DAFD',
        textAlign: 'left',
        padding: '10px ', color: '#4434A6', fontSize: '40px', fontFamily: 'Sanchez', fontWeight: 'bold' }}> {title} </h2>
    
      {/* Block Content */}
      <p style= {{color: '#4434A6', fontSize: '24px', fontFamily: 'League Spartan', paddingTop: '15px'}}> {content} </p>
    </div>
  );
}

字符串
我尝试在传递给组件的字符串中使用换行符，
标签，但两者都只是导致字符本身被显示，而不是创建新行。

<div style={{display: 'flex', flexDirection: 'column', alignSelf: 'stretch'}}>
                    <ContentBlock title="Sample Title" 
                        content="Sample Content 1\n
                        Sample Content 2\n
                        Sample Content 3\n
                        Sample Content 4"></ContentBlock>
                    <ContentBlock title="Second Content Block" content="Example"></ContentBlock>
                </div>

型