reactjs - Material-ui SSR Remix 示例导致样式在水合后重复，我应该对它们进行重复数据删除吗？

Question

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

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

Answer 1

请参阅此链接以获取更多详细信息 - 此链接

尝试刷新服务器端样式表。在所有基于 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
  }, []);