> For the complete documentation index, see [llms.txt](https://pm1100tm.gitbook.io/devnote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pm1100tm.gitbook.io/devnote/week08/8.-globalstyle-and-theme.md).

# 8. GlobalStyle\&Theme

## GlobalStyle 과 Theme

## 🎲 CSS Reset

\> [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)

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

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

## npm styled-reset

\> [styled-reset github](https://github.com/zacanger/styled-reset#readme)

```shell
npm i styled-reset
```

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

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

### 사용

```tsx
import { Reset } from 'styled-reset';

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

### Global Style 적용

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

```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 일 필요는 없음)

```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 파일을 만든다.

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

export default defaultTheme;
```

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

```typescript
import Theme from './Theme';

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

export default darkTheme;
```

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

```typescript
import defaultTheme from './defaultTheme';

type Theme = typeof defaultTheme;

export default Theme;
```

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

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

```typescript
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 속성 적용하기

```typescript
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;
```