Завдання: Використання Вбудованих Стилів у Компоненті 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"
.
- Встановити background color на
-
Додати текстовий вміст всередину елемента
<div>
, наприклад,Five Finger Death Punch
.
- Інлайнові стилі додаються за допомогою атрибута
style
, і значенням для цього атрибута має бути об'єкт. - При використанні інлайнових стилів значення, які не є простими числами (наприклад, рядки, одиниці виміру або кольори), повинні бути взяті в лапки
"..."
. Наприклад,margin: "30px"
означає, що властивістьmargin
має значення30px
.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.17
Завдання: Використання Вбудованих Стилів у Компоненті 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"
.
- Встановити background color на
-
Додати текстовий вміст всередину елемента
<div>
, наприклад,Five Finger Death Punch
.
- Інлайнові стилі додаються за допомогою атрибута
style
, і значенням для цього атрибута має бути об'єкт. - При використанні інлайнових стилів значення, які не є простими числами (наприклад, рядки, одиниці виміру або кольори), повинні бути взяті в лапки
"..."
. Наприклад,margin: "30px"
означає, що властивістьmargin
має значення30px
.
Дякуємо за ваш відгук!