ReactでCSSを含める方法

Inline CSS: Reactコンポーネント内でスタイルを直接指定する方法です。以下は、スタイルがインラインで指定された例です。

import React from 'react';
const MyComponent = () => {
  const styles = {
    backgroundColor: 'red',
    color: 'white',
    padding: '10px',
  };
  return <div style={styles}>Hello, World!</div>;
};
export default MyComponent;

CSSファイルのインポート: Reactコンポーネントで外部のCSSファイルをインポートして使用する方法です。まず、CSSファイルをプロジェクトに追加し、次にReactコンポーネントでインポートします。

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

CSSモジュール: CSSモジュールを使用すると、各Reactコンポーネントに対して固有のCSSスタイルが作成されます。各スタイルはクラス名として使用されます。

import React from 'react';
import styles from './styles.module.css';
const MyComponent = () => {
  return <div className={styles.myComponent}>Hello, World!</div>;
};
export default MyComponent;

CSS-in-JSライブラリ: CSS-in-JSライブラリ（例:styled-components、Emotion）を使用すると、JavaScript内でCSSを定義および適用できます。以下はstyled-componentsを使用した例です。

import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
  background-color: red;
  color: white;
  padding: 10px;
`;
const MyComponent = () => {
  return <StyledDiv>Hello, World!</StyledDiv>;
};
export default MyComponent;

これらはReactでCSSを含めるいくつかの一般的な方法です。あなたのプロジェクトのニーズや好みに合わせて最適な方法を選択してください。