Challenge: Use Inline Styles in a React Component
We will practice adding inline styles to a React component. Follow the steps below to complete the challenge:
-
Create a new React component called
StyledBox. -
Inside the
StyledBoxcomponent, render a<div>element. -
Add the following inline styles to the
<div>element:- Set the background color to
"lightblue"; - Set the width to
"300px"; - Set the padding to
"10px"; - Set the border radius to
"10px"; - Set the text alignment to
"center"; - Set the font size to
"24px"; - Set the font weight to
"bold".
- Set the background color to
-
Add some text content inside the
<div>element, such asFive Finger Death Punch.
- Inline styles are added using theΒ
styleΒ attribute, and the value for this attribute should be an object. - When using inline styles, values that are not plain numbers (such as strings, units, or colors) should be enclosed in quotesΒ
"...". For example,Βmargin: "30px"Β indicates that theΒmarginΒ property has a value ofΒ30px.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.17
Challenge: Use Inline Styles in a React Component
Swipe to show menu
We will practice adding inline styles to a React component. Follow the steps below to complete the challenge:
-
Create a new React component called
StyledBox. -
Inside the
StyledBoxcomponent, render a<div>element. -
Add the following inline styles to the
<div>element:- Set the background color to
"lightblue"; - Set the width to
"300px"; - Set the padding to
"10px"; - Set the border radius to
"10px"; - Set the text alignment to
"center"; - Set the font size to
"24px"; - Set the font weight to
"bold".
- Set the background color to
-
Add some text content inside the
<div>element, such asFive Finger Death Punch.
- Inline styles are added using theΒ
styleΒ attribute, and the value for this attribute should be an object. - When using inline styles, values that are not plain numbers (such as strings, units, or colors) should be enclosed in quotesΒ
"...". For example,Βmargin: "30px"Β indicates that theΒmarginΒ property has a value ofΒ30px.
Thanks for your feedback!