SSRInjectStyles

This component allows css modules to be injected into the <head> of the project when the component is rendered server side.

Due to the way css modules in node_modules work, without this component, it would inject the styles on runtime, which would cause a flash of unstyled content on the client side.

This component mitigates that by injecting the styles on the server side, so that the styles are already present when the client side renders.

Just insert it into your framework wherever it allows you to add elements to the <head>.

Usage

Next.js

_document.tsx

...
  import { SSRInjectStyles } from '@ef-global/backpack/SSRInjectStyles';
  const Document = () => {
  return (
  <Html>
    <Head>
      <SSRInjectStyles />
    </Head>
    <body className='overwrite-status-overlay'>
...

Gatsby

  export const Head = () => <SSRInjectStyles />

Skeleton Subscription