代码之家  ›  专栏  ›  技术社区  ›  DaCurse

Material ui SSR混音示例导致水合作用后重复样式,我应该重复它们吗?

  •  0
  • DaCurse  · 技术社区  · 4 年前

    我遵循了以下示例: https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript 设立 material-ui 在混音中使用SSR,我注意到在水合作用后,我得到了重复的风格:

    Above are the server-rendered style tags, below are the injected style tags Duplicate styles for an element

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

    0 回复  |  直到 4 年前
        1
  •  0
  •   Jawahar Mariselvam    4 年前

    有关更多详细信息,请参阅此链接- 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
      }, []);