“自定义”单页面应用程序中的样式组件问题

Question

我目前正在开发一个旧项目，它有自己的方式来做单页面应用程序（Ajax调用MVC应用程序，获取视图，替换视图客户端，添加样式和批次其他东西!!），虽然不理想，但目前我已经坚持了！

我正在尝试将现有的React应用程序集成到此站点中，我正在做的是使用create-react-app然后build来创建捆绑包，并在应用程序中，在视图中开始从服务器返回特定页面，我正在放置script和link标签，指向我的包文件。值得注意的是，此服务器视图是部分ASP.NET MVC视图，因此我的script和link标记在某种程度上是body的一部分。

我也在我的React应用程序中使用styled-components。

现在，问题出现了：当我第一次加载我提到的页面时，我的script已加载，我可以看到所有组件的样式都正确，但是当我在现有的自定义SPA应用程序中导航时，某些方面，与styled-components相关的样式混乱了，找回它们的唯一方法是重新加载页面。

我正在检查该页面，我看到styled-components正在使用link中创建的自定义head进行操作，并且我看到data-styled-components属性已填充自定义类名作为我的组件被加载，但是当出现问题时，在Chrome开发者工具中，我看到link标记闪烁，好像它已被更改，但它保持不变。

我附上了标签的GIF： - 它从初始页面加载开始 - 我离开并回来，我看到更多的课程被追加 - 我重复这一步，我只看到它闪烁

我知道这个帖子已经很长了，但是我们非常感谢任何帮助。对于当前的基础架构，是否有可能与以下事实有关：每当我回到页面时，都会从指向我的React包的服务器发送script标记？

Answer 1

感谢Max Stoiber在this GitHub issue回答：

这种行为的原因正是我在问题的最后提到的：每次加载页面时，都会从服务器发送一个script标记，其中包含该包，从而导致一个新的要创建的styled-components的实例; styled-components不支持此功能，这就是问题