Вивчайте Завдання: Використання Вбудованих Стилів у Компоненті React

Ми будемо практикувати додавання інлайнових стилів до React-компонента. Виконайте наступні кроки, щоб завершити завдання:

Створити новий React-компонент з назвою StyledBox.
Усередині компонента StyledBox відобразити елемент <div>.
Додати до елемента <div> наступні інлайнові стилі:
- Встановити background color на "lightblue";
- Встановити width на "300px";
- Встановити padding на "10px";
- Встановити border radius на "10px";
- Встановити text alignment на "center";
- Встановити font size на "24px";
- Встановити font weight на "bold".
Додати текстовий вміст всередину елемента <div>, наприклад, Five Finger Death Punch.

Інлайнові стилі додаються за допомогою атрибута style, і значенням для цього атрибута має бути об'єкт.
При використанні інлайнових стилів значення, які не є простими числами (наприклад, рядки, одиниці виміру або кольори), повинні бути взяті в лапки "...". Наприклад, margin: "30px" означає, що властивість margin має значення 30px.

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

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

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

Запитати АІ

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

Suggested prompts:

Can you explain how to add inline styles to a React component?

What does the `StyledBox` component look like with the specified styles?

Can you give me a step-by-step guide to complete this challenge?

Awesome!

Completion rate improved to 2.17

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

Створити новий React-компонент з назвою StyledBox.
Усередині компонента StyledBox відобразити елемент <div>.
Додати до елемента <div> наступні інлайнові стилі:
- Встановити background color на "lightblue";
- Встановити width на "300px";
- Встановити padding на "10px";
- Встановити border radius на "10px";
- Встановити text alignment на "center";
- Встановити font size на "24px";
- Встановити font weight на "bold".
Додати текстовий вміст всередину елемента <div>, наприклад, Five Finger Death Punch.

Інлайнові стилі додаються за допомогою атрибута style, і значенням для цього атрибута має бути об'єкт.
При використанні інлайнових стилів значення, які не є простими числами (наприклад, рядки, одиниці виміру або кольори), повинні бути взяті в лапки "...". Наприклад, margin: "30px" означає, що властивість margin має значення 30px.

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

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

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