CSSモジュールとグローバルスタイルでReactアプリケーションをスタイリング：初心者でも安心の完全ガイド

2024-06-17

ReactアプリケーションでCSSモジュールを使ってグローバルスタイルを適用する方法

_app.jsファイルは、Reactアプリケーションのルートコンポーネントとして機能します。このファイルを使用して、アプリケーション全体に適用されるグローバルスタイルを定義できます。

import React from 'react';
import './global.css'; // グローバルスタイルを定義したCSSファイル

function MyApp({ Component, pageProps }) {
  return (
    <React.StrictMode>
      <Component {...pageProps} />
    </React.StrictMode>
  );
}

export default MyApp;

上記の例では、global.cssという名前のCSSファイルがインポートされています。このファイルには、アプリケーション全体に適用されるスタイル定義が含まれます。

styled-componentsライブラリを使用すると、コンポーネント固有のスタイルを簡単に定義できます。また、グローバルスタイルを定義するのにも使用できます。

import React from 'react';
import styled from 'styled-components';

const GlobalStyle = styled.div`
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
  }
`;

function MyApp() {
  return (
    <GlobalStyle>
      {/* アプリケーションのコンテンツ */}
    </GlobalStyle>
  );
}

export default MyApp;

上記の例では、GlobalStyleという名前のStyledコンポーネントが定義されています。このコンポーネントは<div>要素をレンダリングし、body要素に適用されるスタイルを定義します。

CSS ModulesとclassNameプロパティを使用して、特定のコンポーネントにグローバルスタイルを適用することもできます。

import React from 'react';
import globalStyles from './global.css'; // グローバルスタイルを定義したCSSモジュール

function MyComponent() {
  return (
    <div className={globalStyles.globalClass}>
      {/* コンポーネントのコンテンツ */}
    </div>
  );
}

export default MyComponent;

上記の例では、global.cssという名前のCSSモジュールがインポートされています。このモジュールには、.globalClassという名前のCSSクラスが定義されています。このクラスは、MyComponentコンポーネントの<div>要素に適用されます。

注意事項

グローバルスタイルを定義する際は、CSSセレクターのスコープが広いことに注意する必要があります。他のコンポーネントのスタイルに干渉しないように、セレクターをできるだけ具体的にする必要があります。
グローバルスタイルの使用を控え、コンポーネント固有のスタイルに集中することをお勧めします。グローバルスタイルを使いすぎると、コードが読みづらくなり、メンテナンスが難しくなります。

これらの方法は、ReactアプリケーションでCSSモジュールを使用してグローバルスタイルを適用するためのほんの一例です。自分に合った方法を見つけて、アプリケーションをスタイリングしてください。

その他、ご参考になる情報として、以下のリソースもご紹介します。

_app.jsファイルを使用する

import React from 'react';
import './global.css'; // グローバルスタイルを定義したCSSファイル

function MyApp({ Component, pageProps }) {
  return (
    <React.StrictMode>
      <Component {...pageProps} />
    </React.StrictMode>
  );
}

export default MyApp;

global.css

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

styled-componentsライブラリを使用する

import React from 'react';
import styled from 'styled-components';

const GlobalStyle = styled.div`
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
  }
`;

function MyApp() {
  return (
    <GlobalStyle>
      {/* アプリケーションのコンテンツ */}
    </GlobalStyle>
  );
}

export default MyApp;

CSS ModulesとclassNameプロパティを使用する

import React from 'react';
import globalStyles from './global.css'; // グローバルスタイルを定義したCSSモジュール

function MyComponent() {
  return (
    <div className={globalStyles.globalClass}>
      {/* コンポーネントのコンテンツ */}
    </div>
  );
}

export default MyComponent;

.globalClass {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

これらのサンプルコードはあくまでも一例であり、状況に合わせて変更する必要があります。

ReactアプリケーションでCSSモジュールを使ってグローバルスタイルを適用するその他の方法

context APIを使用して、アプリケーション全体にグローバルスタイルを共有することができます。

import React, { createContext } from 'react';

const ThemeContext = createContext({
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  fonts: {
    heading: 'Arial, sans-serif',
    body: 'Helvetica, sans-serif',
  },
});

const GlobalStyle = () => {
  const { colors, fonts } = useContext(ThemeContext);
  return (
    <style jsx="true">
      {`
        body {
          font-family: ${fonts.body};
          color: ${colors.primary};
        }
      `}
    </style>
  );
};

function MyApp() {
  return (
    <ThemeProvider>
      <GlobalStyle />
      {/* アプリケーションのコンテンツ */}
    </ThemeProvider>
  );
}

export default MyApp;

上記の例では、ThemeContextというコンテキストが作成されています。このコンテキストには、colorsとfontsというプロパティがあり、グローバルスタイルで使用される色とフォントを定義します。GlobalStyleコンポーネントは、context APIを使用してThemeContextから値を取得し、グローバルスタイルを定義するCSSを生成します。

CSS-in-JSライブラリを使用する

styled-components以外にも、emotion、jstyled、glamorなどのCSS-in-JSライブラリを使用して、グローバルスタイルを定義することができます。これらのライブラリは、コンポーネント内で直接CSSを記述することを可能にし、コードをより読みやすく、メンテナンスしやすくすることができます。

CSSフレームワークを使用する

BootstrapやTailwind CSSなどのCSSフレームワークを使用して、グローバルスタイルを定義することもできます。これらのフレームワークは、あらかじめ定義されたスタイルセットを提供しており、開発時間を短縮することができます。

カスタムフックを使用する

useGlobalStylesという名前のカスタムフックを作成して、グローバルスタイルを定義することもできます。このフックは、アプリケーション全体で使用できるグローバルスタイルオブジェクトを返します。

import React, { useState } from 'react';

const useGlobalStyles = () => {
  const [styles, setStyles] = useState({
    colors: {
      primary: '#007bff',
      secondary: '#6c757d',
    },
    fonts: {
      heading: 'Arial, sans-serif',
      body: 'Helvetica, sans-serif',
    },
  });

  return styles;
};

function MyComponent() {
  const { colors, fonts } = useGlobalStyles();
  return (
    <div style={{
      fontFamily: fonts.body,
      color: colors.primary,
    }}>
      {/* コンポーネントのコンテンツ */}
    </div>
  );
}

export default MyComponent;

上記の例では、useGlobalStylesというカスタムフックが作成されています。このフックは、colorsとfontsというプロパティを持つグローバルスタイルオブジェクトを返します。MyComponentコンポーネントは、useGlobalStylesフックを使用してグローバルスタイルオブジェクトを取得し、コンポーネントのスタイルに適用します。

どの方法を選択するかは、アプリケーションの要件と開発者の好みによって異なります。シンプルなアプリケーションの場合は、_app.jsファイルまたはstyled-componentsライブラリを使用するだけで十分な場合があります。より複雑なアプリケーションの場合は、context API、CSS-in-JSライブラリ、CSSフレームワーク、またはカスタムフックを使用する必要があるかもしれません。

グローバルスタイルを定義する際は、以下の点に注意する必要があります。