GlobalStyles 적용하기

1. default style 설정하기

• styled-reset 으로 기본 스타일 초기화
• box-sizing, 배경, 폰트 색상 정도 설정해주기
• 폰트는 system-ui를 사용하면 사용자 운영체제 설정 폰트를 따른다

import CreateAccount from "./routes/create-account";
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
  ${reset};
  * {
    box-sizing: border-box;
  }
  body {
    background-color: black;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }
`;

function App() {
  return (
    <>
      <GlobalStyles />
      <RouterProvider router={router} />
    </>
  );
}