
emotion の `Global` コンポーネントを使用するとサイト全体に共通のcssを適用することができます。

`@emotion/react` はインストール済みとします。

## 導入方法

### 全体に適用する css を用意する

```jsx
const global = css`
  body {
    color: #333;
  }
`;
```

### \_app.tsx で Global コンポーネントを import する

```jsx
import { Global, css } from "@emotion/react";
```

### Global コンポーネントにスタイルを適用する

```jsx
<Global styles={global} />
```

### \_app.tsx の全体

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global, css } from '@emotion/react'

export default function MyApp({ Component, pageProps }: AppProps) {
  const global = css`
    body {
      color: #333;
    }
  `

  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## グローバル css を別ファイルにする場合

### global.ts を作成してスタイルを記述する

※ css は Next.js のデフォルトのスタイルです。

```jsx
// global.ts

import { css } from "@emotion/react";

export const global = css`
  html,
  body {
    padding: 0;
    margin: 0;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      Fira Sans,
      Droid Sans,
      Helvetica Neue,
      sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }

  @media (prefers-color-scheme: dark) {
    html {
      color-scheme: dark;
    }
    body {
      color: white;
      background: black;
    }
  }
`;
```

### \_app.tsx で読み込み、Global コンポーネントに適用する

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'

import { global } from '@styles/globals'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## normalize.css を併用する場合

### \***\*normalize.css をインストールする\*\***

```bash
npm install --save normalize.css
```

### global.ts で読み込む

```jsx
// global.ts

import "normalize.css";
```

## 参照

- Emotion – Global Styles [https://emotion.sh/docs/globals](https://emotion.sh/docs/globals)（2022-9-11参照）


[Next.js] emotionのGlobal Stylesでサイト全体のCSSを指定する

Tags