Styled-components로 Global.tsx 관리하기

전체 css 적용하는 법

global.tsx

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  html {
    font-size: 62.5%;

  @media (min-width: 1020px) {
    font-size: 82%;
  }
  @media (min-width: 1400px) {
    font-size: 100%;
  }
  }
`;
export default GlobalStyle;

media query로 반응형할 width 설정 후 크기에 따라 font size 지정해서 app.tsx에 전역으로 설정 후
css 설정시 rem 단위로 설정하면 알아서 줄어듦

app.tsx

function App() {
  return (
    <>
      <MainPage></MainPage>
      <GlobalStyle />
    </>
  );
}

참조
[react] styled-components 반응형 스타일 설정하기