反应选择样式未加载答案

【问题标题】：react-select styles not loading反应选择样式未加载
【发布时间】：2021-04-17 16:45:31
【问题描述】：

我正在使用 NextJS (v10.0.0) + TailwindCSS (v2.1.1) 构建一个反应应用程序。目前，我正在创建一个包含谷歌地图的页面，其中使用了@react-google-maps/api (v2.1.1)。更具体地说，从 useJsApiLoader 钩子注入返回值的 HOC。此 HOC 获取 google 地图库并在文档中为其创建一个脚本标签。

当尝试导入和渲染 react-select 组件时，其元素的类存在于 DOM 中，但进一步检查，此类类不存在样式，即组件按预期工作但看起来没有样式，甚至它的可访问性文字有时可见。一旦我删除负责加载库的代码，问题就会消失。

这个问题很可能发生在任何执行类似于useJSApiLoader 的任务的 HOC 或钩子上，但我想了解为什么会发生这种情况以及我能做些什么来解决它。到目前为止，我采取这种方法没有运气：

使用next/dynamic（无ssr）动态加载react-select
重构由 HOC 包装的组件以在其中包含 useJsApiLoader 挂钩。
隔离地图组件并在其中加载库。

可以在https://github.com/noe-lc/react-select-gm 找到最小的复制回购。当 withGoogleMaps 钩子从 pages/index.js 文件中移除时，Select 组件的样式将被正确加载

感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript reactjs google-maps react-select

【解决方案1】：

由于某种原因，Select 组件的样式在获取 gmaps 库时尝试渲染它时没有正确加载。所以我尝试渲染组件而不是包含它在获取库之后，现在一切似乎都工作正常。

我使用LoadScriptNext https://react-google-maps-api-docs.netlify.app/#loadscriptnext 完成了此操作，它提供了一种在加载库时执行回调的方法。

PS 尽管如此，我还是想了解为什么会出现这个问题。

【讨论】：