sar24i24, 7:02 PM Reactpdt = © React-pdf | edit 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 ‘@reac const styles = StyleSheet.create({ page: { backgroundColor: ‘tomato’ }, section: { color: ‘white’, textAlign: Ds ‘center’, margin: 3@ const doc = ( Section #1 ntpsulteact-pctoraisying wn‘erae4, 7.02 PM React pat 3 ReactPDF .render(doc); See it in action > 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/render const MyDocument = () => ( Section #1 See it in action > Mixing both solutions The style prop also accepts an Array as value, containing any possible combination of the last two alternatives ntpsulteact-pctoraisying2124/24, 7:02 PM Reactpdt import React from ‘react’; import { Page, Text, View, Document, StyleSheet } from ‘@reac const styles = StyleSheet.create({ page: { backgroundColor: ‘tomato’ }, section: { textAlign: ‘center’, margin: 30 } Ds const MyDocument = () => ( Section #1 5 P| , Protip: This can be useful when you want to apply both predefined styles, and styles based on props See it in action > 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 '@reac hntpsreact et orgitving2124/24, 7:02 PM Reactpdt const styles = StyleSheet.create({ section: { width: 2e0, "@media max-width: 400° width: 3@0, be "@media orientation: landscape’: { width: 4@@, oa } ns const MyDocument = () => ( Section #1 5 P| , See it in action > Valid units pt (default. Based on the standard 72 dpi PDF document) in inches mm millimeters cm centimeters ntpsulteact-pctoraisying2124/24, 7:02 PM Reactpdt % percentage vw viewport/page width vh_viewport/page height Valid CSS properties Flexbox © alignContent * flexGrow ¢ alignitems © flexShrink © alignSelf * flexBasis © flex © justifyContent © flexDirection *° gap © flexWrap *° rowGap * flexFlow * columnGap Layout * bottom © right e display * top ° left ° overflow * position * zindex Dimension e height ° = minHeight © = maxHeight © =minWidth © maxWidth ° width ntpsulteact-pctoraisying‘erae4, 7.02 PM Color * backgroundColor * color © opacity Text ° fontSize © fontFamily ¢ fontStyle © fontWeight © letterSpacing © lineHeight ¢ =maxLines Sizing/positioning © object-fit * object-position Margin/padding * margin © marginHorizontal © marginVertical © marginTop © marginRight © marginBottom © marginLeft Transformations ° transform:rotate ntpsulteact-pctoraisying Reactpdt textAlign textDecoration textDecorationColor textDecorationStyle textIndent textOverflow textTransform padding paddingHorizontal paddingVertical paddingTop paddingRight paddingBottom paddingLeft transform:scale‘erae4, 7.02 PM * transform:scalex ¢ transform:scaleY * transform:translate © transform:translateX * transform:translateY Borders ¢ border * borderColor © borderStyle © borderWidth * borderTop * borderTopColor * borderTopStyle © borderTopWidth * borderRight © borderRightColor * borderRightStyle * borderRightWidth « Hooks Intpsuiteact-patoraisying React pat transform:skew transform:skewX transform:skewY transform:matrix transformOrigin borderBottom borderBottomColor borderBottomStyle borderBottomWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderTopLeftRadius borderTopRightRadius borderBottomRightRadius borderBottomLeftRadius Fonts >