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

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 / remix-island

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