Material-ui: Material-UI Paper component does not recognize new line character
I am passing to the Material-UI Paper component a string that contains a new line character. However, the Paper component seems to be ignoring it, as it is not starting a new line. Is this behavior intentional, or is this a bug. The code in question is below (comment.text is the string in question):
<Paper key={index} rounded={false} style={styles.paper}>
<div>{comment.text}</div>
<div style={{textAlign: 'right', color: grey500}}>{comment.user + ", " + comment.date}</div>
</Paper>
alexanderwhatley
All 5 comments
@alexanderwhatley What is the value of comment.text? And which versions of everything are you using? The template that we provide is to help answer the questions more efficiently. 😁
m2mathew
on 17 Nov 2017
Hey @m2mathew, sorry about that. The version of material-ui is 0.17.4, and the value of comment.text is "Hi how \n are you?"
alexanderwhatley
on 17 Nov 2017
Well, think about how the DOM would handle this. I would expect \n to render if I put that between two <div>s in an HTML file.
Since this isn't related to MUI explicitly, I will close this issue. Be sure to head to Stack Overflow or similar for more help implementing content within the DOM.
m2mathew
on 17 Nov 2017
I used: style={{whiteSpace: 'pre-line'}}
<Typography
variant="body1"
style={{whiteSpace: 'pre-line'}}
>
{body}
</Typography>
Reference:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n
ericksprengel
on 24 Feb 2019
It seems like it worth additional prop on the "Typography" component.
goodwin64
on 5 Dec 2019
Related issues
ericraffin
·
3Comments
reflog
·
3Comments
newoga
·
3Comments
chris-hinds
·
3Comments
finaiized
·
3Comments
Most helpful comment
I used:
style={{whiteSpace: 'pre-line'}}Reference:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n