Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Använd Inline-Stilar i en React-Komponent | Stilmönster i React-Applikationer
React Mastery

bookUtmaning: Använd Inline-Stilar i en React-Komponent

Vi kommer att öva på att lägga till inline-stilar i en React-komponent. Följ stegen nedan för att slutföra utmaningen:

  1. Skapa en ny React-komponent med namnet StyledBox.

  2. Inuti StyledBox-komponenten, rendera ett <div>-element.

  3. Lägg till följande inline-stilar på <div>-elementet:

    • Ange bakgrundsfärg till "lightblue";
    • Ange bredd till "300px";
    • Ange padding till "10px";
    • Ange border radius till "10px";
    • Ange textjustering till "center";
    • Ange teckenstorlek till "24px";
    • Ange teckenvikt till "bold".

  4. Lägg till någon text inuti <div>-elementet, till exempel Five Finger Death Punch.

  1. Inline-stilar läggs till med hjälp av attributet style, och värdet för detta attribut ska vara ett objekt.
  2. När inline-stilar används ska värden som inte är rena siffror (såsom strängar, enheter eller färger) omslutas av citattecken "...". Till exempel, margin: "30px" anger att egenskapen margin har värdet 30px.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

bookUtmaning: Använd Inline-Stilar i en React-Komponent

Svep för att visa menyn

Vi kommer att öva på att lägga till inline-stilar i en React-komponent. Följ stegen nedan för att slutföra utmaningen:

  1. Skapa en ny React-komponent med namnet StyledBox.

  2. Inuti StyledBox-komponenten, rendera ett <div>-element.

  3. Lägg till följande inline-stilar på <div>-elementet:

    • Ange bakgrundsfärg till "lightblue";
    • Ange bredd till "300px";
    • Ange padding till "10px";
    • Ange border radius till "10px";
    • Ange textjustering till "center";
    • Ange teckenstorlek till "24px";
    • Ange teckenvikt till "bold".

  4. Lägg till någon text inuti <div>-elementet, till exempel Five Finger Death Punch.

  1. Inline-stilar läggs till med hjälp av attributet style, och värdet för detta attribut ska vara ett objekt.
  2. När inline-stilar används ska värden som inte är rena siffror (såsom strängar, enheter eller färger) omslutas av citattecken "...". Till exempel, margin: "30px" anger att egenskapen margin har värdet 30px.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 4
some-alt