React.jsでスタイルをインポートする方法

以下に、React.jsでスタイルをインポートする方法を説明します。

外部CSSファイルのインポート: React.jsでは、外部のCSSファイルをインポートすることができます。まず、プロジェクトのルートディレクトリにあるCSSファイルを作成します。例えば、"styles.css"という名前のファイルを作成しましょう。その後、Reactコンポーネント内で以下のようにCSSファイルをインポートします。
```
import './styles.css';
```
これにより、"styles.css"ファイルで定義されたスタイルがReactコンポーネントに適用されます。
インラインスタイルの使用: React.jsでは、インラインスタイルを使用して特定のコンポーネントにスタイルを適用することもできます。インラインスタイルはJavaScriptオブジェクトとして定義され、JSX内で使用されます。
```
const componentStyle = {
 color: 'red',
 fontSize: '16px',
 // 他のスタイルプロパティ
};
function MyComponent() {
 return <div style={componentStyle}>Hello, World!</div>;
}
```
上記の例では、componentStyleオブジェクトを作成し、styleプロパティに渡しています。これにより、MyComponent内のdiv要素にスタイルが適用されます。
CSSモジュールの使用: もう1つの一般的な方法は、CSSモジュールを使用することです。CSSモジュールを使用すると、各Reactコンポーネントに対して固有のスタイルを適用できます。まず、.css拡張子を持つCSSファイルを作成します。例えば、"styles.module.css"という名前のファイルを作成しましょう。次に、Reactコンポーネント内でCSSモジュールをインポートし、適用したい要素にクラス名を指定します。
```
import styles from './styles.module.css';
function MyComponent() {
 return <div className={styles.myClass}>Hello, World!</div>;
}
```
上記の例では、stylesオブジェクトにはCSSモジュールのクラス名が含まれており、classNameプロパティを使用して適用します。

これらはReact.jsでスタイルをインポートするためのいくつかの一般的な方法です。選択する方法はプロジェクトの要件や個人の好みによって異なります。詳細については、React.js公式ドキュメントを参照してください。