ReactでCSSファイルをインポートする方法

ReactでCSSファイルをインポートするためには、以下の手順を実行します。

Reactプロジェクトのルートディレクトリにあるsrcディレクトリ内に、CSSファイルを配置します。例えば、src/styles.cssという名前のCSSファイルを作成します。
ReactコンポーネントでCSSファイルをインポートするために、以下のようにimport文を使用します。

import './styles.css';

上記の例では、styles.cssファイルを相対パスで指定してインポートしています。

CSSファイルが正しくインポートされたら、Reactコンポーネント内でスタイルを使用することができます。たとえば、以下のようにクラス名を指定してスタイルを適用できます。

import React from 'react';
import './styles.css';
const MyComponent = () => {
  return (
    <div className="my-component">
      <h1>Hello, React!</h1>
    </div>
  );
};
export default MyComponent;

上記の例では、my-componentというクラス名がstyles.css内のスタイルに適用されます。

以上がReactでCSSファイルをインポートして使用する基本的な方法です。この方法を使用すると、コンポーネントごとに独自のスタイルシートを作成し、管理することができます。

また、CSSモジュールやCSS-in-JSライブラリなど、より高度なスタイリングの方法もあります。必要に応じて、これらの方法を調査して利用することもできます。

この記事では、ReactでCSSファイルをインポートする方法を説明しました。これにより、Reactプロジェクトで簡単にスタイルを適用することができます。