Tâche

Nous allons maintenant procéder à la création du composant Alert, qui rendra tous les éléments passés en tant qu'enfants et leur appliquera des styles spécifiques. La tâche est :

1. Créez le composant Alert qui contient l'élément div à l'intérieur.
2. L'élément div doit avoir le nom de classe alert.
3. L'élément div doit avoir la prop children comme contenu.
4. L'élément div doit avoir le CSS suivant.

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

1. Pour créer un élément div dans le composant, utilisez <div>...</div>.
2. Pour passer props.children comme contenu textuel, encadrez-le avec {...} et définissez props.children. Résultat : <div>{props.children}</div>.
3. Pour ajouter un nom de classe à l'élément div, utilisez l'attribut className et définissez-le sur alert. Résultat : className="alert".
4. Pour importer le fichier avec les styles dans le fichier index.js, utilisez l'instruction import et fournissez le chemin correct vers le fichier. Résultat : import './index.css'.
5. Pour appliquer des styles à l'élément div, utilisez le sélecteur de nom de classe .alert et insérez les styles de la tâche.