Typescript 에서 styled component 에 폰트적용시키다 발생한 에러

const GlobalCss = createGlobalStyle 에
reset css 후에 폰트 추가하면서 @import 치니까 do not use @import 라고 뜨길래
react helmet 설치해서 helmet.tsx 파일 하나만들고
폰트는 link형태로 넣어줬고 (crossorigin빨간줄그이길래 그냥지웠습니다.)
reset css는 그냥 css파일 하나 만들어서 거기에넣고 link로 불러왔습니다.
그리고 헬멧 쓰고나서 Warning: Using UNSAFE 에러가 뜨는데 이게 strict 모드에서만 발생한다길래 이것도 지웠습니다. ㅎㅎ;;;

헬멧 설치

npm i react-helmet
npm i --save-dev @types/react-helmet

helmet.tsx파일 내용

import { Component, ReactNode } from "react";
import { Helmet } from "react-helmet";

class HelmetComponent extends Component {
  render(): ReactNode {
    return (
      <>
        <Helmet>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap"
            rel="stylesheet"
          ></link>
          <link rel="stylesheet" href="./reset.css" />
        </Helmet>
      </>
    );
  }
}
export default HelmetComponent;

App.tsx 내용

import { createGlobalStyle } from "styled-components";
import Router from "./routes/Router";
import HelmetComponent from "./helmet";

const GlobalCss = createGlobalStyle`
body {
  font-family: "Nunito", sans-serif;
  background-color:${(props) => props.theme.bgColor};
  color:${(props) => props.theme.textColor}
}
a {
  text-decoration-line: none;
}
* {
  box-sizing: border-box;
}
`;

function App() {
  return (
    <>
      <HelmetComponent />
      <GlobalCss />
      <Router />
    </>
  );
}

export default App;

참고한 사이트

https://choi95.tistory.com/169 (헬멧사용)
https://www.npmjs.com/package/react-helmet (npm헬멧사이트)
https://velog.io/@dlruddms5619/Warning-Using-UNSAFEcomponentWillReceiveProps-in-strict-mode-is-not-recommended-and-may-indicate-bugs-in-your-code (Using UNSAFE 관련)
https://ywtechit.tistory.com/174 (Using UNSAFE 관련2 / 저는 이방법이 안되더라구요)