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
StyledBox
component, 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 themargin
property has a value of30px
.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Pregunte me preguntas sobre este tema
Resumir este capítulo
Mostrar ejemplos del mundo real
Awesome!
Completion rate improved to 2.17
Challenge: Use Inline Styles in a React Component
Desliza para mostrar el menú
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
StyledBox
component, 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 themargin
property has a value of30px
.
¡Gracias por tus comentarios!