React で CSS スタイルを使用する

React アプリケーションで CSS を使用する方法は複数あります。

以下に、一般的な方法と、React でこれらの方法を実装する方法の詳細を示します。

インラインスタイル

React では、要素内で CSS スタイルを直接使用するには、インラインスタイルを使用します。

インラインスタイルは、CSS スタイルをオブジェクトとして要素の style 属性に直接渡します。各スタイルプロパティは、従来の CSS プロパティ名ではなく、キャメルケースで表されます。

要素内で直接使用する：

例

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

スタイル情報を含むオブジェクトを作成し、style 属性で参照することもできます：

例

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // インラインスタイルオブジェクトを定義
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

上記の例では、containerStyle と titleStyle は 2 つのインラインスタイルオブジェクトで、それぞれ div 要素と h1 要素に適用されています。重要なポイントは次のとおりです：

  • CSS プロパティはキャメルケースで表します（例：backgroundColorではなくbackground-color）。
  • すべてのスタイルプロパティ値は文字列として渡されます（数値は直接使用でき、React が自動的に単位を追加します）。

インラインスタイルは、コンポーネントの状態に応じて動的に変更することもできます：

例

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Toggle Highlight
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

スタイルファイルを使用する

CSS スタイルは別のファイルに記述できます。次のファイル拡張子を.css使用してファイルを保存し、それをアプリケーションにインポートするだけです。

App.css という名前のスタイルファイルを作成し、次の CSS コードを追加します：

例

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

あなたのアプリケーションでスタイル App.css をインポートします：

例

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS モジュール

アプリケーションにスタイルを追加する別の方法は、CSS モジュールを使用することです。

CSS モジュールは、ローカルスコープの CSS ファイル命名規則です。この方法では、CSS クラス名とアニメーション名はデフォルトでローカルスコープに適用されます。

CSS モジュールは、別のファイルに配置されたコンポーネントに非常に便利です。

次の拡張子を.module.cssを使用して CSS モジュールを作成します。例：MyComponent.module.css。

例

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

アプリケーションでスタイルシートをインポートします：

例

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
その他の拡張