Material-ui SSR Remix example causes styles to be duplicated after hydration, should I de-dupe them?

Question

I've followed the following example: https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript to set up material-ui with SSR on Remix, and I've noticed that after hydration, I get duplicated styles:

So I've been thinking if it would be beneficial to delete the server rendered styles after hydration? I came up with a simple solution of adding an attribute to the server rendered styles and then deleting them either in client.entry.tsx, or in a useEnhancedEffect in the root component, is there a preference, or should I not worry about the duplicated styles?

Answer 1

Please refer to this link for more details - this link

Try flushing the Server Side Stylesheets. It is a common practice to flush server side stylesheets at once the client side stylesheet is ready in all SSR based ReactJS libraries. So give it a try.

// Only executed on client
  useEnhancedEffect(() => {
    // re-link sheet container
    emotionCache.sheet.container = document.head;
    // re-inject tags
    const tags = emotionCache.sheet.tags;
    emotionCache.sheet.flush();
    tags.forEach((tag) => {
      // eslint-disable-next-line no-underscore-dangle
      (emotionCache.sheet as any)._insertTag(tag);
    });
    // reset cache to reapply global styles
    clientStyleData.reset();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);