8. GlobalStyle&Theme

GlobalStyle 과 Theme

🎲 CSS Reset

> CSS Tools: Reset CSS

모든 HTML 태그에는 기본 스타일이 적용되어있는데, 이러한 속성들은 스타일을 잡을 때 오히려 불편하기 떄문에 스타일을 초기화 시켜준다.

다시 말해, 이것은 시작점이지 손댈 수 없는 독립된 블랙박스가 아닙니다.

npm styled-reset

> styled-reset github

npm i styled-reset

공식 깃헙에서 보면 Styled Components 3.x or 2.x 버전인 경우에는, injectGlobal api 를 사용하라고 권장하고, styled-reset@1.7.1 를 설치하라고 권장한다.

현시점(2024년 3월) 사용하는 Styled Components 의 버전은 6.x 이다.

사용

import { Reset } from 'styled-reset';

export default function App() {
  return (
    <div>
      {/* 최상위에 세팅해준다. */}
      <Reset />
    </div>
  );
}

Global Style 적용

먼저 src/styles 폴더를 생성 후 GlobalStyle.ts 파일을 만든다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%; // 1rem = 10px
  }

  body {
    font-size: 1.6rem; // 1.6rem = 16px
  }

  :lang(ko) {
    h1, h2, h3 {
      word-break: keep-all;
    }
  }
`;

export default GlobalStyle;

App.tsx 에서 GlobalStyle 을 사용한다. (단, 반드시 App.tsx 일 필요는 없음)

import { Reset } from 'styled-reset';

import GlobalStyle from './styles/GlobalStyle';

export default function App() {
  return (
    <div>
      {/* 최상위에 세팅해준다. */}
      <Reset />
      <GlobalStyle />
    </div>
  );
}

Theme

Design System 에 따라서 Theme 를 지정해서 사용한다.

defaultTheme

src/styles/defaultTheme.ts 파일을 만든다.

const defaultTheme = {
  colors: {
    background: '#FFF',
    text: '#000',
    primary: '#F00',
    secondary: '#00F',
  },
};

export default defaultTheme;

src/styles/darkTheme.ts 파일을 만든다.

import Theme from './Theme';

const darkTheme: Theme = {
  colors: {
    background: '#000',
    text: '#FFF',
    primary: '#F00',
    secondary: '#00F',
  },
};

export default darkTheme;

같은 위치에 Theme.ts 파일을 생성하는데, 타입을 지정하기 위함이다.

import defaultTheme from './defaultTheme';

type Theme = typeof defaultTheme;

export default Theme;

같은 위치에 styled.d.ts 파일 생성한다.

앞서 생성한 GlobalStyle.ts 에서 타입을 잡지 못하는 이슈를 해결하기 위함이다.

import 'styled-components';

import Theme from './Theme';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {
    // colors: {
    //   background: string;
    //   text: string;
    //   primary: string;
    //   secondary: string;
    // };
  }
}

GlobalStyle.ts 에 Theme 속성 적용하기

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%; // 1rem = 10px
  }

  body {
    font-size: 1.6rem; // 1.6rem = 16px
    background: ${(props) => props.theme.colors.background};
    color: ${(props) => props.theme.colors.text};
  }

  :lang(ko) {
    h1, h2, h3 {
      word-break: keep-all;
    }
  }
`;

export default GlobalStyle;