In the webpack config, css-loader is used, but I have

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How do you add styles to this implementation? about react-ssr-lambda HOT 3 CLOSED

aws-samples commented on June 29, 2024

How do you add styles to this implementation?

from react-ssr-lambda.

Comments (3)

rishit5 commented on June 29, 2024

I am facing the same issue, how exactly did you import the styles? Can you elaborate on the workaround you used and also the correct solution, if you have been able to find it?

from react-ssr-lambda.

christopher-caldwell commented on June 29, 2024

@rishit5 Hey, sorry I missed this. I ended up using styled-components to inject the CSS into the head. It was a very long and painful process to get it right.

Here's a watered down version

import ReactDOMServer from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'
import MetaTagsServer from 'react-meta-tags/server'
import { MetaTagsContext } from 'react-meta-tags'

import App from './App'
/**
 * <html lang="en">
  <head>
    <meta charset="utf-8" />
    ... other head tags
    META
    STYLED_COMPONENTS
  </head>
  <body >
    <div id="root"></div>
  </body>
</html>
 */
import { HtmlTemplate } from './html'

export const renderApp = () => {
  const Sheets = new ServerStyleSheet()
  const metaTagsInstance = MetaTagsServer()

  const props = {...}

  const app = ReactDOMServer.renderToStaticMarkup(
    Sheets.collectStyles(
      <MetaTagsContext extract={metaTagsInstance.extract}>
        <App {...props} />
      </MetaTagsContext>,
    ),
  )

  const meta = metaTagsInstance.renderToString()
  const styledComponentsTag = Sheets.getStyleTags()

  const html = HtmlTemplate.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
    .replace('STYLED_COMPONENTS', styledComponentsTag)
    .replace('META', meta)
  Sheets.seal()
  return html
}