Background
We're exporting HTML content generated by React into MS Word documents using plain Javascript. We came up with a solution to page break where necessary and that is working on Print (+ Print as PDF). To export HTML into MS Word we're using this tutorial.
However, we're failing because MS Word is not understanding CSS classes. So we tried inline CSS to the holder instead of using a class. As it's still not working, one of our colleagues came up with a solution after some searching that MS Word understands the <br /> tag instead of page-break... etc. So he tried editing the rendered HTML on the browser with:
<br style="page-break-before: always" />
and it just worked in MS Word.
In React
But when he tried to generate the same code from React, he added:
<br style={{ pageBreakBefore: 'always' }} />
but React rendered the code into:
<br style="break-before: page;">
This is completely desired/expected from React, as page-break-before etc. are deprecated and the successor is break-before.
In MS Word
But MS Word doesn't understand the latest break-before styling.
So we need to bypass React compiler to generate the exact same deprecated code in this case to break the pages on MS Word.
How can we achieve that?
