Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Verwendung von Inline-Stilen in Einer React-Komponente | Styling-Techniken in React-Anwendungen
React Mastery

bookHerausforderung: Verwendung von Inline-Stilen in Einer React-Komponente

In diesem Abschnitt wird das Hinzufügen von Inline-Styles zu einer React-Komponente geübt. Die folgenden Schritte sind zur Bearbeitung der Aufgabe erforderlich:

  1. Eine neue React-Komponente mit dem Namen StyledBox erstellen.

  2. Innerhalb der StyledBox-Komponente ein <div>-Element rendern.

  3. Dem <div>-Element die folgenden Inline-Styles hinzufügen:

    • Hintergrundfarbe auf "lightblue" setzen;
    • Breite auf "300px" setzen;
    • Innenabstand (Padding) auf "10px" setzen;
    • Rahmenradius auf "10px" setzen;
    • Textausrichtung auf "center" setzen;
    • Schriftgröße auf "24px" setzen;
    • Schriftgewicht auf "bold" setzen.

  4. Einen beliebigen Textinhalt innerhalb des <div>-Elements hinzufügen, zum Beispiel Five Finger Death Punch.

  1. Inline-Styles werden mit dem Attribut style hinzugefügt, wobei der Wert dieses Attributs ein Objekt sein muss.
  2. Bei der Verwendung von Inline-Styles sollten Werte, die keine reinen Zahlen sind (wie Zeichenketten, Einheiten oder Farben), in Anführungszeichen "..." gesetzt werden. Zum Beispiel bedeutet margin: "30px", dass die Eigenschaft margin den Wert 30px hat.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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

bookHerausforderung: Verwendung von Inline-Stilen in Einer React-Komponente

Swipe um das Menü anzuzeigen

In diesem Abschnitt wird das Hinzufügen von Inline-Styles zu einer React-Komponente geübt. Die folgenden Schritte sind zur Bearbeitung der Aufgabe erforderlich:

  1. Eine neue React-Komponente mit dem Namen StyledBox erstellen.

  2. Innerhalb der StyledBox-Komponente ein <div>-Element rendern.

  3. Dem <div>-Element die folgenden Inline-Styles hinzufügen:

    • Hintergrundfarbe auf "lightblue" setzen;
    • Breite auf "300px" setzen;
    • Innenabstand (Padding) auf "10px" setzen;
    • Rahmenradius auf "10px" setzen;
    • Textausrichtung auf "center" setzen;
    • Schriftgröße auf "24px" setzen;
    • Schriftgewicht auf "bold" setzen.

  4. Einen beliebigen Textinhalt innerhalb des <div>-Elements hinzufügen, zum Beispiel Five Finger Death Punch.

  1. Inline-Styles werden mit dem Attribut style hinzugefügt, wobei der Wert dieses Attributs ein Objekt sein muss.
  2. Bei der Verwendung von Inline-Styles sollten Werte, die keine reinen Zahlen sind (wie Zeichenketten, Einheiten oder Farben), in Anführungszeichen "..." gesetzt werden. Zum Beispiel bedeutet margin: "30px", dass die Eigenschaft margin den Wert 30px hat.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4
some-alt