ReactコンポーネントのためのCSSのみをインポートする方法

CSSファイルの作成: まず、特定のコンポーネントに適用するスタイルを含むCSSファイルを作成します。例えば、"component-style.css"という名前のファイルを作成しましょう。
CSSファイルのインポート: Reactコンポーネントのファイルで、先ほど作成したCSSファイルをインポートします。以下は、例として"Component.js"という名前のコンポーネントファイルを想定しています。

import React from 'react';
import './component-style.css';
function Component() {
  return (
    <div className="component">
      {/* コンポーネントの内容 */}
    </div>
  );
}
export default Component;

上記のコードでは、import './component-style.css';を使用して、"component-style.css"ファイルをインポートしています。

CSSの適用: 先ほどのコードで、"component"というクラス名が指定された<div>要素にスタイルが適用されます。"component-style.css"ファイル内で、.componentセレクタを使用してスタイルを定義することができます。

これで、特定のReactコンポーネントにのみスタイルが適用されるようになりました。他のコンポーネントには影響を与えず、コードのモジュール性を保つことができます。

以上が、ReactコンポーネントのためにCSSのみをインポートする方法です。この方法を使うことで、コンポーネントベースのスタイリングをより効率的に行うことができます。