Xiphe/remix-island

Make <Head /> the last element rendered by <App /> to fix CSS-in-JS libs such as Stitches

louisremi opened this issue · 1 comments

louisremi commented

Stitches isn't easy to setup with Remix. I found out this article which helps, but provides an inferior workaround to the hydration problems this repo is solving.

Your solution also makes Stitches easier to use with Remix… provided that the <Head /> tag be rendered as the last element of the <App />

export const Head = createHead(() => {
  return (
    <>
      <Meta />
      <Links />
      <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
    </>
  );
});

export default function App() {
  return (
    <>
      <Outlet />
      <ScrollRestoration />
      <Scripts />
      <LiveReload />
      {/* Head must be rendered after the rest of the DOM when using a CSS-in-JS lib such as Stitches */}
      <Head />
    </>
  );
}

My advice is to update the position of <Head /> in the docs

Xiphe commented

That's interesting indeed! Thanks for reporting!

I added a note about this in the documentation. Will consider updating the code examples when it turns out to be required for other libraries, too.

  • 👍1