材料uiのメニュー項目をテキストで囲む方法。

Question

私はポップオーバーに表示する必要があるテキストがあります。テキストを1行に表示する次のコードがあります。私は複数の行にそれらを持っているテキストをラップする必要がありますが、これまでの私の更新は成功していません。何か案が？

      <Popover 
           anchorEl={target} 
           open={open} 
           anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}} 
           targetOrigin={{horizontal: 'left', vertical: 'bottom'}} 
           onRequestClose={handleRequestClose} 
           animation={PopoverAnimationVertical}> 
           <Menu 
            autoWidth={true} 
            > 
            <MenuItem style={{width: "200px", height: "200px"}}> 
             <p style={{display: "flex", flexWrap: "wrap"}}>'aslkjflajdsljflskdjflsdfjlsjdfjdfjlasjkfadlsf'</p> 
            </MenuItem> //this does not work.... 
           </Menu> 

Answer 1

whiteSpaceスタイルをリセットしてください -

<MenuItem style={{whiteSpace: 'normal'}}> 
    <p>This song is just six words long. This song is just six words long. This song is just six words long. This song is just six words long.</p> 
</MenuItem>