Styling with Chakra-UI

[PovedaAqui]

Hi,

I've been trying to stylish the <Document> by using Chakra-UI, but it has been a nightmare, how are you doing it? Is the in-line styling the unique way?

Currently, I'm trying to get the <Outline> left-aligned, but nothing has worked so far. Could you help me?

return (
    <Flex>
      <Box>
        <Document
          file={"sample.pdf"}
          onLoadSuccess={onDocumentLoadSuccess}
          options={{
            cMapUrl: "cmaps/",
            cMapPacked: true,
            standardFontDataUrl: "standard_fonts/",
          }}
        >
          <Page pageNumber={pageNumber} />
          <Box>
            <Outline onItemClick={onItemClick} />
          </Box>
        </Document>
      </Box>
    </Flex>
  );
}

[wojtekmaj]

I don't have experience with Chakra-UI, but here's what I know: while React-PDF requires some inline styling to work, e.g. for positioning annotations, Outline renders a simple nested HTML list, nothing else. Therefore it should not be any different than styling, well, a HTML list :)

[PovedaAqui]

How would you put the Outline to the left of the Document? I'm trying without using a Drawer, but it has been impossible.

[james-Infotrack]

You can try using a portal

  <Document
                loading={
                  <Box sx={{ margin: '0.5rem 0' }}>Loading {doc.name || 'PDF'}...</Box>
                }
                file={doc}
                onLoadSuccess={onDocumentLoadSuccess}
                noData={
                  <ExtendedDocumentPlaceholder
                    loading={false}
                    onVisibilityChange={() => {}}
                    children={<div>No Data was available</div>}
                  />
                }
                error={
                  <ExtendedDocumentPlaceholder
                    loading={true}
                    onVisibilityChange={() => {}}
                    children={<div>Something went wrong</div>}
                  />
                }
                onLoadError={() => {
                  setError(true);
                }}>
            

                {document.getElementById('test') &&
                  createPortal(<Outline />, document.getElementById('test')!, 'test')}    /// < -------------- see here

                {Array.from(new Array(numPages), (el, index) => {
                  return (
                    <Box key={`page_${index + 1}`} style={{ marginBottom: '1rem' }}>
                      <Page pageNumber={index + 1} />
                    </Box>
                  );
                })}
              </Document>

Then simply add your element with the Id where you need it to be in your html