Styling
Because a document without styles would be very boring, react-pdf ships a powerful styling solution using CSS and Flexbox.
StyleSheet API
React-pdf also sticks with the primitives specs when it comes to styling.
StyleSheet.create()
Create a stylesheet. This method expects a valid JS object as only argument (containing as much css definitions as you want) and returns an object that you can pass down to components via the style prop
import React from 'react';import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';const styles = StyleSheet.create({ page: { backgroundColor: 'tomato' }, section: { color: 'white', textAlign: 'center', margin: 30 }});const doc = ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> </Page> </Document>);ReactPDF.render(doc);Inline styling
There's no need to call StyleSheet.create in order to style components. You can also just pass a plain JS object to the style prop and react-pdf will get the job done.
import React from 'react';import { Page, Text, View, Document } from '@react-pdf/renderer';const MyDocument = () => ( <Document> <Page size="A4" style={{ backgroundColor: 'tomato' }}> <View style={{ color: 'white', textAlign: 'center', margin: 30 }}> <Text>Section #1</Text> </View> </Page> </Document>);Mixing both solutions
The style prop also accepts an Array as value, containing any possible combination of the last two alternatives
import React from 'react';import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';const styles = StyleSheet.create({ page: { backgroundColor: 'tomato' }, section: { textAlign: 'center', margin: 30 }});const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={[styles.section, { color: 'white' }]}> <Text>Section #1</Text> </View> </Page> </Document>);Protip: This can be useful when you want to apply both predefined styles, and styles based on props
Media queries
There may be times in which you'll need to apply different styles based on the document context. For that, we provide media-queries support (just as you would do it for the web!). You can query based on both width and height (min and max), and also orientation:
import React from 'react';import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';const styles = StyleSheet.create({ section: { width: 200, '@media max-width: 400': { width: 300, }, '@media orientation: landscape': { width: 400, }, }});const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> </Page> </Document>);Valid units
pt (default. Based on the standard 72 dpi PDF document)
in inches
mm millimeters
cm centimeters
% percentage
vw viewport/page width
vh viewport/page height
Valid CSS properties
Flexbox
- alignContent
- alignItems
- alignSelf
- flex
- flexDirection
- flexWrap
- flexFlow
- flexGrow
- flexShrink
- flexBasis
- justifyContent
Layout
- bottom
- display
- left
- position
- right
- top
- overflow
- zIndex
Dimension
- height
- maxHeight
- maxWidth
- minHeight
- minWidth
- width
Color
- backgroundColor
- color
- opacity
Text
- fontSize
- fontFamily
- fontStyle
- fontWeight
- letterSpacing
- lineHeight
- maxLines
- textAlign
- textDecoration
- textDecorationColor
- textDecorationStyle
- textIndent
- textOverflow
- textTransform
Sizing/positioning
- object-fit
- object-position
Margin/padding
- margin
- marginHorizontal
- marginVertical
- marginTop
- marginRight
- marginBottom
- marginLeft
- padding
- paddingHorizontal
- paddingVertical
- paddingTop
- paddingRight
- paddingBottom
- paddingLeft
Transformations
- transform:rotate
- transform:scale
- transform:scaleX
- transform:scaleY
- transform:translate
- transform:translateX
- transform:translateY
- transform:skew
- transform:skewX
- transform:skewY
- transform:matrix
- transformOrigin
Borders
- border
- borderColor
- borderStyle
- borderWidth
- borderTop
- borderTopColor
- borderTopStyle
- borderTopWidth
- borderRight
- borderRightColor
- borderRightStyle
- borderRightWidth
- borderBottom
- borderBottomColor
- borderBottomStyle
- borderBottomWidth
- borderLeft
- borderLeftColor
- borderLeftStyle
- borderLeftWidth
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomRightRadius
- borderBottomLeftRadius
