我正在构建用于行拆分的组件，该组件接受一个字符串并返回分成几行的文本，这些行不会溢出其父组件。

在 stackoverflow 上好心人的帮助下，我设法构建了这个示例，它在沙箱或纯 React 应用程序（也使用自定义字体）中运行得非常好。但是，当我在 Gatsby 项目中使用相同的组件时，文本会溢出其父容器。

CodeSandBox 和代码示例： https ://codesandbox.io/s/line-splitter-5k1xl?file =/ src/App.js

我尝试删除导致使用默认字体的全局样式，然后测量是准确的。然而，我的目标是使用自定义字体并且不会像纯 React 示例中那样溢出。

我尝试过的：

• 我曾尝试从 gatsbyBrower.js 中的样式组件中使用 createGlobalStyle 应用样式
• 我曾尝试在 gatsbyBrowser.js 和直接在组件中应用纯 css 样式
• 我尝试添加内联样式，并直接在组件本身中定义字体

奇怪的事情要注意 - 在某些浏览器上，组件只有在几次刷新后才能准确测量。

我几个小时以来一直在寻找这个问题的解决方案，但我不知道如何解决这个问题，因此我们将不胜感激。