How to use the styled-components.ServerStyleSheet function in styled-components

let version

  libs.forEach(name => {
    if (Object.keys(dependencies).includes(name)) {
      lib = name
      version = dependencies[lib]
    }
  })

  switch (lib) {
    case 'styled-components':
      // wtf this api is convoluted af
      // seems like this needs the components to render inside
      // one of these functions
      const { ServerStyleSheet } = require('styled-components')
      const sheet = new ServerStyleSheet()

      // console.log('sheet instance', sheet.create)
      // const css = sheet.getStyleTags()

      // could return react elements here
      // const css = sheet.getStyleElements()
      break
    // case 'glamorous':
    case 'cxs':
      const cxs = require('cxs')
      const css = cxs.css()
      return css
    default:
      return ''
  }

useragent,
}: {
  res: Response;
  store: Store;
  renderProps: any;
  config: any;
  clientConfig: any;
  timing: any;
  title: string;
  useragent: ExpressUseragent.UserAgent;
}) {
  /*
   * メインコンテンツをレンダリングします。
   */

  const sheet = new ServerStyleSheet(); // <-- creating out stylesheet
  const jsx = sheet.collectStyles();
  const content = renderToString(jsx);
  const styles = sheet.getStyleElement();

  const { routes } = renderProps;
  const status = routes[routes.length - 1].status || 200;

  const chunkNames = flushChunkNames();
  const assets = flushChunks(config.clientStats, { chunkNames });

  sendSSRResponse({
    res,
    status,
    store,
    content,
    clientConfig,

render() {
    const sheet = new ServerStyleSheet();
    const main = sheet.collectStyles(<main>);
    const styleTags = sheet.getStyleElement();
    return (
      
        
          <title>{seo.title}</title>
          
          
          
          {/*  */}
          {/*  */}

          
          
          
</main>

export async function get(req: Request, res: Response) {
  const baseUrl = `${req.protocol}://${req.get('Host')}`;
  const { nonce }: { nonce: string } = res.locals;
  const { store, runSaga } = configureStore();
  const client = createClient({ link: new SchemaLink({ schema }) });
  const sheet = new ServerStyleSheet();
  const context = {};

  // for Node.js because `fetch` requires absolute URLs
  store.dispatch(setBaseUrl(baseUrl));

  const App = () => (
    
      
        
          {/* add `div` because of `hydrate` */}
          <div id="root">
            
          </div>

static getInitialProps({renderPage}) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props => sheet.collectStyles())
    return {
      ...page,
      styles: (
        <>
          
          
          {sheet.getStyleElement()}
        
      )
    }
  }

static async getInitialProps(ctx: any) {
    const sheet = new ServerStyleSheet();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => sheet.collectStyles()
      });

    const initialProps: any = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [...initialProps.styles, ...sheet.getStyleElement()]
    };
  }

static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props =>
      sheet.collectStyles(),
    )
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags }
  }

static getInitialProps ({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props => sheet.collectStyles())
    const styleTags = sheet.getStyleElement()
    const styles = flush()
    return { ...page, styleTags, styles }
  }

export function wrapRootElement({ element, pathname }) {
  const sheet = new ServerStyleSheet()
  sheetByPathname.set(pathname, sheet)
  return {element}
}

export const replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents
}) => {
  const sheet = new ServerStyleSheet();
  const body = renderToString(sheet.collectStyles(bodyComponent));

  replaceBodyHTMLString(body);
  setHeadComponents([sheet.getStyleElement()]);

  return;
};