title: Styling List with React PDF
body: <p>I have created a small React app to test out React PDF.</p>
  <p>When the download link is clicked it creates the pdf as intended. My problem is that I have created a Display component which consists of an unordered list and three list items but it does not display the list correctly.</p>
  <p>It renders from App.js as I would expect but when I print the PDF it mashes the list into a continuous line.</p>
  <p><a href="https://i.stack.imgur.com/eW1V3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eW1V3.png" alt="enter image description here" /></a>I tried different styles, placing  in  components and a bunch of other methods to no avail.</p>
  <p>Is it possible to style like I wish using React PDF?</p>
  <p>If so any suggestions would be very welcome.</p>
  <p><em><strong>App.js</strong></em></p>
  <pre><code>import './App.css';
  import { MyDocument } from './pdf';
  import { PDFDownloadLink } from '@react-pdf/renderer';
  import { Display } from './display';
  
  
  
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        {&lt;PDFDownloadLink document={&lt;MyDocument /&gt;} fileName=&quot;somename.pdf&quot;&gt;
          {({ blob, url, loading, error }) =&gt;
            loading ? 'Loading document...' : 'Download now!'
          }
        &lt;/PDFDownloadLink&gt;}
        &lt;Display /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Display.js</strong></p>
  <pre><code>export function Display() {
      return (
          &lt;ul&gt;
              &lt;li&gt;hihihihihihihi&lt;/li&gt;
              &lt;br/&gt;
              &lt;li&gt;11111111111111&lt;/li&gt;
              &lt;li&gt;22222222222222&lt;/li&gt;
          &lt;/ul&gt;
      )
  }
  </code></pre>
  <p><strong>pdf.js</strong></p>
  <pre><code>import React from 'react';
  import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
  import {Display} from './display';
  
  import  './App.css';
  
  // Create styles
  const styles = StyleSheet.create({
    page: {
      flexDirection: 'column',
      backgroundColor: '#E4E4E4'
    },
    section: {
      margin: 10,
      padding: 10,
      flexGrow: 1
    },
    text: {
      color: 'red',
      display: 'flex',
      flexDirection: 'column',
      width: '100%'
    }
  });
  
  // Create Document Component
  export const MyDocument = () =&gt; (
    &lt;Document&gt;
      &lt;Page size=&quot;A4&quot; style={styles.page}&gt;
        &lt;View style={styles.section}&gt;
          &lt;Text&gt;Section #1&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;&lt;Display /&gt;&lt;/Text&gt;
          &lt;Text&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magnam unde excepturi labore id nam natus animi obcaecati eaque aspernatur, assumenda pariatur suscipit perferendis porro commodi, earum ducimus? Odit, quo.&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={styles.section}&gt;
          &lt;Text&gt;Section #2&lt;/Text&gt;
          &lt;Text&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magnam unde excepturi labore id nam natus animi obcaecati eaque aspernatur, assumenda pariatur suscipit perferendis porro commodi, earum ducimus? Odit, quo.&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/Page&gt;
    &lt;/Document&gt;
  );
  </code></pre>