Reactjs 给予客户端生成的类优先于服务器生成的类

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

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

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

e、 g

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

• .Rfqup：在服务器中，检测到大小为移动
• .fQihLe在客户端中，因为检测到大小为桌面

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

但是服务器类是这样应用的：

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

---

谢谢，

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

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

警告：预期服务器HTML中包含匹配的

这也是非常奇怪的，因为在我检查DOM之后，它的情况是正常的

无论如何，TLDR：

---

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

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

警告：预期服务器HTML中包含匹配的

这也是非常奇怪的，因为在我检查DOM之后，它的情况是正常的

无论如何，TLDR：

---

是-谢谢。我也找到了这个解决方案，它很有效，所以我可以确认mattyfresh的帖子就是答案。似乎和HMR有关。是的，谢谢。我也找到了这个解决方案，它很有效，所以我可以确认mattyfresh的帖子就是答案。似乎与HMR有关。

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

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