Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material-UI Paper component does not recognize new line character

See original GitHub issue

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>

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

210reactions

ericksprengelcommented, Feb 24, 2019

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

29reactions

goodwin64commented, Dec 5, 2019

It seems like it worth additional prop on the “Typography” component.

Top Results From Across the Web

Material-UI Paper component does not recognize new line ...

I am passing to the Material-UI Paper component a string that contains a new line character. However, the Paper component seems to be ......

New line '\n' not recognized inside TextField in React

Try using <p> to display ur descriptions. It automatically makes a new line for each element.

Typography API - Material UI - MUI

Typography API. API reference docs for the React Typography component. Learn about the props, CSS, and other APIs of this exported module.

React Text Field component - Material UI - MUI

The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......

TextField API - Material UI - MUI

Name Type Default autoComplete string autoFocus bool false classes object