[React][TypeScript] styled-components - createGlobalStyle를 이용해서 모든 페이지의 css를 초기화 및 커스텀을 해보자(모든 페이지 폰트 및 배경색, 모바일 버전 적용)

theme 변화에 따른 스타일을 한번에 바꾸고 싶으면 styled-components의 createGlobalStyle을 사용하면 된다.

https://github.com/zacanger/styled-reset/blob/master/src/index.ts

GitHub - zacanger/styled-reset: Eric Meyer's Reset CSS for styled-components

여기에 나온대로 모든 css defalut value를 초기화 시켜주고

내가 원하는 폰트와 theme을 적용해보자
https://fonts.google.com/

Google Fonts

Google Font는 createGlobalStyle 바로 밑에 Import 해주면 된다. 

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import Router from './Router';

const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');
 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
  line-height: 1;
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
*{
  box-sizing: border-box;
}
body{
  font-family: 'Source Sans Pro', sans-serif;
  background-color: ${props=> props.theme.bgColor};
  color: ${(props=>props.theme.textColor)};
  }
  a{
    text-decoration: none;
  }
`


function App() {
  return (
  <>
    <GlobalStyle/>
    <Router/>
  </>)
}

export default App;

----------styled.d.ts----------
import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    bgColor:string,
    accentColor:string,
    textColor:string;
  }
}
----------styled.d.ts----------

----------theme.tsx----------
import { DefaultTheme } from "styled-components";

export const theme:DefaultTheme={
    bgColor:"#2f3640",
    textColor:"#f5f6fa",
    accentColor:"#44bd32",
}
----------theme.tsx----------

import { useParams } from "react-router-dom";
import styled from "styled-components";

const Title = styled.h1`
  color:${props => props.theme.accentColor};
`;

function Title(){
  
    return <Title>Title 입니다.</Title>
}

export default Title;

이렇게 해주면 모든 페이지 body에서는 내가 지정한 theme를 사용할 수 있고, 폰트도 적용할 수 있다.

이렇게 되면 모바일 웹페이지도 구현하기 쉬워진다.