Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Challenge: Apply External CSS to a React App | Styling Techniques in React Applications
React Mastery

book
Challenge: Apply External CSS to a React App

Task

We will now proceed to create the Alert component, which will render all the elements passed as children and apply some specific styles to it. The task is:

  1. Create the component Alert that has the div element inside.

  2. The div element should have the alert class name.

  3. The div element should have the children prop as the content.

  4. The div element should have the following CSS.

css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. To create a div element in the component, use <div>...</div> .

  2. To pass props.children as the text content enclose it within {...} and set props.children . Result: <div>{props.children}</div> .

  3. To add a class name to the div element, use the className attribute and set it to alert . Result: className="alert" .

  4. To import the file with styles in the index.js file, use import statement and provide the correct path to the file. Result: import './index.css' .

  5. To apply styles to the div element, use the class name selector .alert and insert the styles from the task.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 7

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

We use cookies to make your experience better!
some-alt