How to use the emotion-server.renderStylesToString function in emotion-server

let html
  let css
  switch (cssLibrary) {
    case 'styled-components':
      const { ServerStyleSheet } = require('styled-components')
      const sheet = new ServerStyleSheet()
      html = render(
        sheet.collectStyles(
          React.createElement(App.default, { routes, path })
        )
      )
      css = sheet.getStyleTags()
      return { path, html, css, props }
    case 'emotion':
      const { renderStylesToString } = require('emotion-server')
      html = renderStylesToString(
        render(app)
      )
      return { path, html, props }
    case 'glamor':
      // doesn't seem to be working...
      const glamor = require('glamor/server')
      const res = glamor.renderStatic(() => (
        render(app)
      ))
      html = res.html
      css = `<style>${res.css}</style>`
      return { path, html, css, props }
    default:
      html = render(app)
      return { path, html, props }
  }

caches.reduce((prev, next) => next === prev, true) &&
    (await checkCache("config.yml", JSON.stringify(config)))
  ) {
    return true;
  }

  const messages = await i18n();

  try {
    const links = articles.map(article => formatURL(article.path));
    const metadatas = articles.map(article => ({
      path: article.path,
      ...getMeta(article).data
    }));

    const html = renderStylesToString(
      ReactDOMServer.renderToStaticMarkup(
        jsx(
          IntlProvider,
          { locale: config.language || config.lang || "en", messages },
          jsx(
            Document,
            { config, links, path: "./articles.mdx" },
            jsx(ArchivePage, { config, articles: metadatas })
          )
        )
      )
    );
    await writeContent(`${html}`);
  } finally {
    console.log("Render completed: Archive");
  }

async function render(config) {
  if (await checkCache("config.yml", JSON.stringify(config))) return true;
  const messages = await i18n();
  try {
    const html = renderStylesToString(
      ReactDOMServer.renderToStaticMarkup(
        jsx(
          IntlProvider,
          { locale: config.language || config.lang || "en", messages },
          jsx(
            Document,
            { config, messages, path: "home.mdx" },
            jsx(HomePage, { config, messages })
          )
        )
      )
    );
    await writeContent(`${html}`);
  } finally {
    console.log("Render completed: Home");
  }

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  const html = renderStylesToString(renderToString(bodyComponent));
  replaceBodyHTMLString(html);
};

.add('EmotionServerCssButton', () => {
    renderStylesToString(
      ReactDOMServer.renderToString(
        
          {Array.from(new Array(5)).map((_, index) => (
            Material-UI
          ))}
        ,
      ),
    );
  })
  .add('Naked', () => {

async function render(config) {
  if (!(await exists("./public/404.html"))) {
    const messages = await i18n();
    try {
      const html = renderStylesToString(
        ReactDOMServer.renderToStaticMarkup(
          jsx(
            IntlProvider,
            { locale: config.language || config.lang || "en", messages },
            jsx(
              Document,
              {
                config,
                path: "error.mdx",
                data: {
                  title: messages.error.title,
                  description: messages.error.description
                }
              },
              jsx(ErrorPage, { config })
            )

.get("/*", (req, res) => {
    const context = {};
    const markup = renderStylesToString(renderToString(
      
        
      
    ));

    if (context.url) {
      res.redirect(context.url);
    } else {
      res.status(200).send(
        `
    
    
        
        
        <title>Security Goals Web Report</title>

assets,
  content = '',
  state = {},
  DocumentComponent = Document
}) => {
  const styles = assets.filter(asset => asset.match(/\.css$/))
  const scripts = assets.filter(asset => asset.match(/\.js$/))

  return (
    '' +
    renderToStaticMarkup(
      createElement(DocumentComponent, {
        head: Helmet.rewind(),
        styles,
        scripts,
        content: renderStylesToString(content || ''),
        state
      })
    )
  )
}

  renderToHtml: (render, Comp) => renderStylesToString(render()),
  getSiteData: () => ({

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  const html = renderStylesToString(renderToString(bodyComponent));
  replaceBodyHTMLString(html);
};