给予客户端生成 Class 优先于服务器生成 Class

Question

我们使用"styled-components": "^4.1.3".

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

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

例如

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

在此示例中，如果是桌面，我们要显示搜索框。如您所见，创建了 2 classes。

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

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

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

如何指示样式化组件优先考虑客户端 class "fQihLe"？

谢谢，

Answer 1

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

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

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

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

Give Client Generated Class Priority over Server Generated Class