🌎

Nextjs | Styled ComponentsでGlobal Stylesを設定

Using Pages Router

stylesフォルダの中にglobalStyles.jsファイルを生成し、createGlobalStyleを使ってグローバルcssを作成します。

既存にあったglobal.cssファイルの内容も以下のように移転しました。


// styles/globalStyles.js

import {createGlobalStyle} from 'styled-components'

const GlobalStyle = createGlobalStyle`
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;
  line-height: 1.6;
  font-size: 18px;
  background: #F0EDE8;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}
`

export default GlobalStyle

ツリーの上部にGlobal Style コンポーネントを追加します。


// pages/_app.js 

import GlobalStyle from '@/styles/globalStyles'

export default function App({Component, pageProps}) {
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  )
}

Style Componentsを使ってGlobal CSSが適用されました。

Using App Router

内容は上記と同じですが、pages/_app.jsではなくapp/layout.jsに適用します。

参考にした資料

How to Create Global Styles with Styled Components

Learn how to leverage the createGlobalStyle function and set global styles with Styled Components

https://scalablecss.com/styled-components-global-styles/