FOUC when using GlobalStyle from Styled Components in the App Router

[mateusriff]

I have globalStyle.ts file, which I'm going to simplify for brevity:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    * {
      color: red;
    }
`;

export default GlobalStyle;

I use it on my theme provider:

// ...
const ThemeProvider = ({ children }: Props) => {
  return (
    <StyledComponentsThemeProvider theme={theme}>
      <GlobalStyle />
      {children}
    </StyledComponentsThemeProvider>
  );
};
// ...

And use ThemeProvider in src/app/layout.tsx.

I'm facing a FOUC (Flash of Unstyled Content) when loading my app. All text loads black (unstyled) instead of red at first, then the text becomes red after the page load is finished.

In the Pages Router, it used to be you could create a custom document to prevent this (see issue #40122 and docs for reference). However, this doesn't seem to be an option in the App Router.

I'd like to know if there are alternative solutions to this problem.