Завдання: Застосування Зовнішнього CSS у React-Додатку
Завдання
Тепер створіть компонент Alert, який буде відображати всі елементи, передані як дочірні, та застосовувати до них певні стилі. Завдання:
- Створити компонент
Alert, який містить елементdiv. - Елемент
divповинен мати класalert. - Вмістом елемента
divмає бути пропchildren. - Елемент
divповинен мати наступні CSS-стилі.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- Для створення елемента
divу компоненті використовуйте<div>...</div>. - Щоб передати
props.childrenяк текстовий вміст, обгорніть його у{...}та встановітьprops.children. Результат:<div>{props.children}</div>. - Щоб додати клас до елемента
div, використовуйте атрибутclassNameта встановіть його значення якalert. Результат:className="alert". - Щоб імпортувати файл зі стилями у
index.js, використовуйте операторimportта вкажіть правильний шлях до файлу. Результат:import './index.css'. - Щоб застосувати стилі до елемента
div, використовуйте селектор класу.alertта вставте стилі із завдання.
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 2. Розділ 7
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.17
Завдання: Застосування Зовнішнього CSS у React-Додатку
Свайпніть щоб показати меню
Завдання
Тепер створіть компонент Alert, який буде відображати всі елементи, передані як дочірні, та застосовувати до них певні стилі. Завдання:
- Створити компонент
Alert, який містить елементdiv. - Елемент
divповинен мати класalert. - Вмістом елемента
divмає бути пропchildren. - Елемент
divповинен мати наступні CSS-стилі.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- Для створення елемента
divу компоненті використовуйте<div>...</div>. - Щоб передати
props.childrenяк текстовий вміст, обгорніть його у{...}та встановітьprops.children. Результат:<div>{props.children}</div>. - Щоб додати клас до елемента
div, використовуйте атрибутclassNameта встановіть його значення якalert. Результат:className="alert". - Щоб імпортувати файл зі стилями у
index.js, використовуйте операторimportта вкажіть правильний шлях до файлу. Результат:import './index.css'. - Щоб застосувати стилі до елемента
div, використовуйте селектор класу.alertта вставте стилі із завдання.
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 2. Розділ 7