How to pass global style and rules to a react page such as @page

user_2815227 0
Viewed 178

In my css/scss file I have the below page style, how can I reference it from my react component that wraps everything on the page? Or rather what is a way to pass to my page?

@page {
    size: 5in 6in;
    margin: 1in 1in 1.25in 1in;
}

Page component :

    <MyThemeProvider theme={frog}>
        <main className="page-container">
              ..... children .....

        </main>
    </MyThemeProvider>

I expect that the CSS rule should be effective when I print this page to PDF.

reactjs css javascript
3 Answers

Or rather what is a way to pass to my page?

I think this is a simpler way to look at it, yes. A react app is a web page (html) that loads a bunch of javascript.

From a web page perspective, CSS is observed by the web browser, so if the rule is defined, it will apply to qualifying elements regardless of if the DOM is static or if there is a react app manipulating it.

For an at-rule such as @page, having it defined it in a style element in the index.html would do the trick without managing it in your React component at all.

Example in the average create-react-app index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
    <style>
        @page {
            size: 5in 6in;
            margin: 1in 1in 1.25in 1in;
        }
    </style>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Tacking your comment into account, that style can be define pretty much anywhere in the body of the page, and therefore you can define it in any one of your react components.

See here for a similar use-case : https://stackoverflow.com/a/66627107/18706075

user_187060750

Actually, no need for hacks out of React.

Please see below, for the custom ContentContainer component code:

import React from 'react';
// other imports

const GlobalStyler = () => (
    <style>{`
        @page {
            size: 5in 6in;
            margin: 1in 1in 1.25in 1in;
        }
  `}</style>
);

const ContentContainer = (props: ContentContainerProps) => {
    return (
        <div>
            <GlobalStyler />
            // other content/components 
        </div>
    );
};

export default ContentContainer;

Here is how your style will end up

enter image description here

user_28152270

You can do:

import React from 'react';
import './global.css';

const ContentContainer = ({theme, ...props}) => (
    <div className={theme} ...props>
          ..... children .....
    </div>
);

export default ContentContainer;

and global.css:

div.frog, div.frog * {
    size: 5in 6in;
    margin: 1in 1in 1.25in 1in;
}

and use it like:

import { ContentContainer } from 'contentContainer.jsx';

myMain = () => (
    <ContentContainer theme="frog" />
);
user_197219250
Related