Styling issues after upgrading kendo-react-pdf

1 Answer 111 Views

PDF Processing Styling

Dide asked on 05 Aug 2024, 01:22 PM

I've just upgraded my kendo-react-pdf from 8.0 to 8.1.1

"@progress/kendo-react-pdf": "8.1.1",
"@progress/kendo-theme-default": "^5.8.1",

but now the CSS isn't applied anymore. I'm using the CSS library 'Emotion' and this worked fine previously. For example I had a styled component in my PDF template with styling:

const Container = styled.div({
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
display: 'flex',
flexDirection: 'column',
});

However, now the CSS only works if I add it inline:

<div
style={{
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
display: 'flex',
flexDirection: 'column',
}}
>

I can change all the styling, but I'd prefer to keep my styled components as that's what we're using for the rest of the app as well.

Thanks!

1 Answer, 1 is accepted

Accepted

answered on 07 Aug 2024, 12:30 PM

Hello, Dide,

Let me start with that all of the KendoReact components are compatible only with the latest version of the theme released at the moment when the used KendoReact version is released therefore the versions from the provided snippet are not compatible.

Can you try upgrading the `kendo-theme-default` to 8.0.1 and see if this will resolve the faced issue?

https://www.telerik.com/kendo-react-ui/components/changelogs/styling/default-theme/#toc--2024-05-13

If the issue persists, please, prepare and send us a small runnable project (e.g. in Stackblitz) where we can reproduce the problem and examine the exact setup leading to it.

Regards,
Vessy
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Dide

commented on 07 Aug 2024, 02:43 PM | edited

Thanks for your quick reply!

I updated kendo-theme-default to 8.0.1 but still seeing the same issues. I will try to create a small runnable project to reproduce the problem.

I noticed the styling is only not applied in my `PDFPageTemplate`, all of the styling in my `HiddenPDF` does work

export const exportPDF = (
pdfContent: HTMLDivElement | null,
fileName: string,
props: PDFPageTemplateProps,
) => {
if (pdfContent) {
savePDF(pdfContent, {
paperSize: 'A4',
pageTemplate: PDFPageTemplate(props),
margin: {
top: '2.4cm',
bottom: '2.4cm',
},
fileName,
keepTogether: '.keepTogether',
forcePageBreak: '.pageBreak',
});
}
};
const Container = styled.div({
height: '1px',
width: '1px',
overflow: 'hidden',
position: 'absolute',
left: '-10000px',
});
interface HiddenPDFProps {
...
}
const HiddenPDF = forwardRef<HTMLDivElement, HiddenPDFProps>(
(
{
...
},
ref,
) => (
<Container aria-hidden>
<div ref={ref}>
<PDFHeaderPage updatedDate={updatedDate} />
<PDFGlossary glossary={glossary} />
<div className="pageBreak" />
</div>
</Container>
),
);
HiddenPDF.displayName = 'HiddenPDF';
export default HiddenPDF;

Dide

commented on 07 Aug 2024, 03:11 PM | edited

I've recreated the problem here:

https://stackblitz.com/edit/stackblitz-starters-7moe83?file=app%2Fpage.tsx

You can see the the styled component `Title` is working when exporting the PDF. But the styling in the `PDFPageTemplate` doesn't work.

Thanks for the help!

Vessy

commented on 09 Aug 2024, 11:44 AM

Hi, Dide,

Thanks a lot for the provided sample. I played with it and it turned out that the faced issue is caused by the upgrade version of the used styling package - `@emotion/styled`. Downgrading it to the latest version from their 10 major release allowed me to export the styled content properly without changing the pdfviewer version:

https://stackblitz.com/edit/stackblitz-starters-adhtmi?file=app%2Fpage.tsx,package-lock.json