チャレンジ：Reactアプリケーションのスタイリング

課題

これから、Alertコンポーネントを作成します。このコンポーネントは、渡されたすべての子要素をレンダリングし、特定のスタイルを適用します。課題は以下の通りです。

1. Alertコンポーネントを作成し、その中にdiv要素を配置する。
2. div要素にはalertクラス名を付与する。
3. div要素の内容としてchildrenプロップを使用する。
4. div要素には以下のCSSを適用する。

padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;

1. コンポーネント内でdiv要素を作成するには、<div>...</div>を使用。
2. テキスト内容としてprops.childrenを渡すには、{...}で囲み、props.childrenを設定。例：<div>{props.children}</div>。
3. div要素にクラス名を追加するには、className属性を使用し、alertを設定。例：className="alert"。
4. スタイルファイルをindex.jsファイルでインポートするには、import文を使い、ファイルへの正しいパスを指定。例：import './index.css'。
5. div要素にスタイルを適用するには、クラス名セレクタ.alertを使い、課題のスタイルを挿入。