Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using the same component in my Gatsby project.
To view the code example, visit: https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js
My attempts to resolve the overflow problem include removing global styles to use default font for accurate measurements, utilizing styled components' createGlobalStyle in gatsbyBrowser.js, applying CSS directly in gatsbyBrowser.js and within the component itself, as well as experimenting with inline styles and font declaration within the component.
An interesting observation is that some browsers accurately measure the component only after multiple refreshes. After hours of searching for a solution, I remain unable to fix this issue. Any assistance would be greatly appreciated.