@page runs on all pages instead of just one when using css-modules with react

Question

I have this code that I want to run only on one particular react component

@media print {

  @page {
    size: 3.49in 1.41in;
    outline: 1pt dotted;
    margin: 0;
    padding: 0;
    page-break-after: always;
  }
}

I am using css-modules and importing a css file only on a single component that is rendered through a route. But this css runs on every page, is there a way I can do it so it only runs on the component I import it on?

Answer 1

Adding this to the react component fixed it - (It is a hacky solution but I could not find any other solution that works with electron)

<style dangerouslySetInnerHTML={{
          __html: `
                @media print {
                  @page {
                    size: 3.49in 1.41in;
                    margin: 0;
                    padding: 0;
                    page-break-after: always;
                  }
                }
              `
        }}/>