If you're using styled-components version 3.4.10, then you have to use injectGlobal instead of createGlobalStyle, because createGlobalStyle was only release in v4 of styled-components. Check it out: [Deprecated] injectGlobal

So, in order for your code to work, you have to change a few things:

import { injectGlobal } from 'styled-components';

const GlobalStyle = injectGlobal`
html {
    height: 100%
}
* {
    padding: 0;
    margin: 0
}
`

export default GlobalStyle

And in your index.ts

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle /> // this comes first
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

The problem lies in the fact that there is currently an issue when using @import in Global Styles. The solution is to take the @import out and place it elsewhere, such as in a link tag, if you're using Google fonts.

To create global styles we can use createGlobalStyle function. For next.js project, you can do that in _app.js or _app.tsx file, depending on whether you are using typescript.

import type { AppProps } from "next/app";
import { createGlobalStyle } from "styled-components";

import Header from "@/components/Header";

const GlobalStyles = createGlobalStyle`
html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}
`;

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <GlobalStyles />
      <Header></Header>
      <Component {...pageProps} />
    </>
  );
}

Of course, if you have more global styles you can export the GlobalStyles from other file, say globalStyle.js.

But then there is nothing out there that stops you from using CSS or SCSS for your global styles. You can always import the .css or .scss or any other supported CSS preprocessor file types as you would normally do.

import '@/styles/global.scss'

And this would work perfectly fine with your Styled Components as well. Though there is a little advantage you get by using createGlobalStyle. You can use all SCSS features without having to add SCSS dependency in your project. And a little drawback is that the auto-complete features of the ide don't work as well with styled-components as they do with .css and .scss files.

You can do it this way:

import { createGlobalStyle } from "styled-components";

import { Fonts } from "./fonts";
import { FontFamily } from "./fontFamily";

const GlobalStyle = createGlobalStyle`
  ${Fonts}
  ${FontFamily}
`;

Some more digging has produced an answer. A warning generated by createGlobalStyle inside the dev console says the following:

GlobalStyle.js:28 Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical meta tag to the stylesheet, or simply embedding it manually in your index.html section for a simpler app.

It seems like the correct way to import a css file is to simply add it inside a helmet.