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

Question

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

我们基于用户代理检测器生成一些样式化的组件，以确定它是移动的还是桌面的。我们还做了样式组件的服务器呈现。

我注意到，在基于请求的服务器用户代理(它总是默认为移动大小)生成服务器css类的实例中，当组件被挂载到客户端并检测到是桌面大小时，将创建另一个类。

例如：

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

在这个例子中，如果它是一个桌面，我们想要显示SearchBox。如您所见，创建了两个类。

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

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

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

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

如何指示样式化的组件优先使用客户端类"fQihLe"？

谢谢,

Answer 1

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

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

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

这也很奇怪，因为在我检查后，DOM是正常的。

无论如何，TLDR：这篇来自mattyfresh的帖子为我修复了:)