让客户端生成的类优先于服务器生成的类答案

【问题标题】：Give Client Generated Class Priority over Server Generated Class让客户端生成的类优先于服务器生成的类
【发布时间】：2019-11-28 07:21:29
【问题描述】：

我们使用“styled-components”：“^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”？

谢谢，

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：