时间戳

首页 > 解决方案 > 让客户端生成的类优先于服务器生成的类

reactjs - 让客户端生成的类优先于服务器生成的类

问题描述

我们使用“样式化组件”：“^4.1.3”。

我们基于用户代理检测器生成一些样式化的组件，以确定它是移动设备还是桌面设备。我们还对样式化组件进行服务器渲染。

我注意到在基于请求的服务器用户代理（它始终默认为移动大小）生成服务器 css 类的实例中，然后当组件安装在客户端上并且检测到它是桌面大小，创建另一个类。

例如

/* sc-component-id: AppContainer__SearchBox-ct8bpk-1 */
.Rfqup{display:none;}.fQihLe{display:block;}

在此示例中，如果它是桌面，我们希望显示 SearchBox。如您所见，创建了 2 个类。

我遇到的问题是我希望应用客户端类而不是服务器类 - 因为这是正确的行为（即用户在桌面上）。

但是服务器类的应用如下：

<div class="AppContainer__SearchBox-ct8bpk-1 Rfqup">

如何指示样式组件优先考虑客户端类“fQihLe”？

谢谢，

标签： reactjsstyled-components

解决方案

我遇到了类似的问题，随机一些组件在 ssr 初始加载时看起来不错，但是刷新或 hmr 在标记上生成了不同的类名，因此样式会丢失。很奇怪。

虽然这不会引发任何错误，但一个症状是此控制台警告（在实施修复后消失了）：

Warning: Expected server HTML to contain a matching <h1> in <div>

这又是非常奇怪的，因为在我检查后 DOM 情况正常。

无论如何，TLDR： mattyfresh的这篇文章为我修复了它:)

推荐阅读