React-pdf: border css property not working

[serkyen]

OS:
macOS 10.14 Mojave

React-pdf version:
1.0.0-alpha.19

Description:
Ever since upgrading to 1.0.0-alpha.19, borders do not work anymore.

How to replicate issue including code snippet (if applies):

import { StyleSheet } from '@react-pdf/renderer/dist/react-pdf.browser.cjs.js';
export const styles = StyleSheet.create({
  page: {
    backgroundColor: '#FFF',
    padding: 10,
    fontSize: 10,
  },
  viewBox: {
    fontSize: 10,
    display: 'flex',
    alignItems: 'flex-start',
    border:'1px solid #000',
    flexDirection: 'row',
  },
});

import { styles } from '../pdf/Styles.js';
...
<Document title="Order">
              <Page wrap size="A4" style={styles.page}>
                 <View style={styles.viewBox}>
                     <Image cache={false} style={{width:150, height:150}} src={this.state.image} />
                </View>
              </Page>
</Document>

When the PDF renders, there is no border.
Prior to version 1.0.0-alpha.19, it was working.

[SzymonNiemiec]

and what about font-weight?

[diegomura]

Hey @serkyen !
I just checked this out. Please use 1pt (or just 1 because points are the default unit) instead of 1px.
I should have never support the px unit, since there are no pixels in the pdf. You can also use in, mm or cm now

[serkyen]

@diegomura Thanks...borders working, but fontWeight : 1 or fontWeight: 20 has no effect.

[diegomura]

That’s because fontWeight was never supported 😊. You should use different fontFamilies to make bold or light texts

[nehamod]

Hi, I am trying to display my resume as pdf to be in center. but its displaying on the left side. Can you please help me fix this. Thanks

[nehamod]

import React from 'react';
import resume from "./resume/resume.pdf";
import { Document, Page, pdfjs } from 'react-pdf';

class Resume extends React.Component {
constructor(props) {
super(props);
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;

    this.state = { numPages: null, pageNumber: 1 }
}

onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
}
render() {
    const { pageNumber, numPages } = this.state;

    return (
        <div className="App">
            <Document file={resume} onLoadSuccess={this.onDocumentLoad}>



                <Page pageNumber={pageNumber} size="A4" style={{ textAlign: 'center' }} > </Page>
                <Page pageNumber={pageNumber} size="A4" style={{ textAlign: 'center' }} > </Page>


            </Document>
            <p> Page {pageNumber} of {numPages}</p>

        </div>
    )
}

}

export default Resume;