reactjs - Material-ui SSR Remix 示例导致样式在水化后被复制，我应该删除它们吗？

Question

我遵循了以下示例:https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript在 Remix 上使用 SSR 设置 material-ui，我注意到在水合作用后，我得到了重复的样式:

所以我一直在想，水合作用后删除服务器渲染样式是否有益？我想到了一个简单的解决方案，即向服务器呈现的样式添加一个属性，然后在 client.entry.tsx 或根组件的 useEnhancedEffect 中删除它们, 是否有偏好，或者我不应该担心重复的样式？

Answer 1

请参阅此链接了解更多详情 - this link

尝试刷新服务器端样式表。一旦客户端样式表在所有基于 SSR 的 ReactJS 库中准备就绪，立即刷新服务器端样式表是一种常见的做法。因此，请尝试一下。

// 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
  }, []);