pages/_appの役割

Themeの設定の仕方

①Themeファイルの作成

//プロジェクトルートにtheme.tsを追加して設定する

export const theme = {
  color: {
    white: '#ffffff',
    red: '#ff0000',
  },
  fontSize: ['12px', '14px', '16px', '18px', '20px', '24px'],
  fonts: {
    primary: `arial, sans-serif`,
  },
};

②pages/_appでThemeProividerを設定

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'styled-components';
import { theme } from '../theme';

const MyApp = ({ Component, pageProps }: AppProps) => {
  // styled-componentnsでテーマを使用するためにThemeProviderを置く
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

③使いたいページでpropsのthemeオブジェクトを参照して呼び出す

import { NextPage } from 'next';
import styled from 'styled-components';

const Text = styled.p`
  color: ${(props) => props.theme.color.red};
  font-size: ${(props) => props.theme.fontSize[5]};
`;

const SampleTheme: NextPage = () => {
  return (
    <div>
      <Text>Themeから参照してスタイリングされたテキストです</Text>
    </div>
  );
};

export default SampleTheme;