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

Course Content

React Mastery

React Mastery

2. Styling Techniques in React Applications
4. Structuring Real-World React Projects

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
  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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 7
We're sorry to hear that something went wrong. What happened?
some-alt