Desafío: Estiliza una Aplicación React

Tarea

Ahora procederemos a crear el componente Alert, que renderizará todos los elementos pasados como hijos y aplicará algunos estilos específicos. La tarea es:

1. Crear el componente Alert que contenga el elemento div en su interior.
2. El elemento div debe tener el nombre de clase alert.
3. El elemento div debe tener la prop children como contenido.
4. El elemento div debe tener el siguiente CSS.

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

1. Para crear un elemento div en el componente, utiliza <div>...</div>.
2. Para pasar props.children como contenido de texto, enciérralo entre {...} y asigna props.children. Resultado: <div>{props.children}</div>.
3. Para agregar un nombre de clase al elemento div, utiliza el atributo className y asígnalo a alert. Resultado: className="alert".
4. Para importar el archivo con los estilos en el archivo index.js, utiliza la declaración import y proporciona la ruta correcta al archivo. Resultado: import './index.css'.
5. Para aplicar estilos al elemento div, utiliza el selector de nombre de clase .alert e inserta los estilos de la tarea.