[jss] Support @page rules

Currently using a @page rule with JSS causes a warning. It still works fine, maybe it just needs to be added as a simple rule to https://github.com/cssinjs/jss/blob/master/src/plugins/rules.js#L9-L19 ?

[jareks]

@kof are you sure that @page needs to be handled by plugin? After all, it’s part of basic CSS.

If we could just add it to global rules here: https://github.com/cssinjs/jss/blob/9b7daa79aeea23422664a283a2557bb70b19b1b5/packages/jss/src/plugins/rules.js then it would be simple even for me to implement 😃

[prajun7]

I was able to remove the warning by using the GlobalStyles component of MUI. I was using @page to define page size and page margin while printing. I did something like this,

import { GlobalStyles } from '@mui/material';
  const printStyle = {
   ['@media print']: {
     ['@page']: {
       size: 'landscape',
       margin: '2px',
      },
    },
  };

You might not need to use @page inside the @media print because @page is only for printing. Documentation We can use the GlobalStyles in our App container. Like this

    const App: React.FC = () => (
      <>
         <GlobalStyles styles={printStyle} />
         <AppView />
      </>
     );