how to achieve multi line label with react Material UI

Question

I am using react js to develop my web application and I am using React material design for the UI. Below is the url which I am referring.

https://material-ui-next.com/

I am trying to achieve something like this

I am using the tabs but I can't get a two line text as like the image I shared. either I can use image and label or if the label is too big then it goes in multi line. How can I achieve two line text as like the image

Answer 1

In order to make multiline text, you can insert the HTML < pre > tag, from which the text formatting is retained. Then it remains to inherit the style of the text.

 <Typography>
    <pre style={{ fontFamily: 'inherit' }}>
        {content}
    </pre>
 </Typography>