Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Застосування Зовнішнього CSS у React-Додатку | Техніки Стилізації у React-Додатках
React Mastery

bookЗавдання: Застосування Зовнішнього CSS у React-Додатку

Завдання

Тепер створіть компонент Alert, який буде відображати всі елементи, передані як дочірні, та застосовувати до них певні стилі. Завдання:

  1. Створити компонент Alert, який містить елемент div.
  2. Елемент div повинен мати клас alert.
  3. Вмістом елемента div має бути проп children.
  4. Елемент div повинен мати наступні CSS-стилі.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. Для створення елемента div у компоненті використовуйте <div>...</div>.
  2. Щоб передати props.children як текстовий вміст, обгорніть його у {...} та встановіть props.children. Результат: <div>{props.children}</div>.
  3. Щоб додати клас до елемента div, використовуйте атрибут className та встановіть його значення як alert. Результат: className="alert".
  4. Щоб імпортувати файл зі стилями у index.js, використовуйте оператор import та вкажіть правильний шлях до файлу. Результат: import './index.css'.
  5. Щоб застосувати стилі до елемента div, використовуйте селектор класу .alert та вставте стилі із завдання.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 7

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.17

bookЗавдання: Застосування Зовнішнього CSS у React-Додатку

Свайпніть щоб показати меню

Завдання

Тепер створіть компонент Alert, який буде відображати всі елементи, передані як дочірні, та застосовувати до них певні стилі. Завдання:

  1. Створити компонент Alert, який містить елемент div.
  2. Елемент div повинен мати клас alert.
  3. Вмістом елемента div має бути проп children.
  4. Елемент div повинен мати наступні CSS-стилі.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. Для створення елемента div у компоненті використовуйте <div>...</div>.
  2. Щоб передати props.children як текстовий вміст, обгорніть його у {...} та встановіть props.children. Результат: <div>{props.children}</div>.
  3. Щоб додати клас до елемента div, використовуйте атрибут className та встановіть його значення як alert. Результат: className="alert".
  4. Щоб імпортувати файл зі стилями у index.js, використовуйте оператор import та вкажіть правильний шлях до файлу. Результат: import './index.css'.
  5. Щоб застосувати стилі до елемента div, використовуйте селектор класу .alert та вставте стилі із завдання.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 7
some-alt