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

bookVerwendung von Inline-Stilen in React

Ein unkomplizierter, jedoch etwas eingeschränkter Ansatz zur Stilzuweisung ist die Verwendung von Inline-Styles, ähnlich wie bei der Anwendung von Styles auf HTML-Elemente mit dem style-Attribut. In React besteht der einzige Unterschied darin, dass der Wert dieses Attributs ein Objekt und kein String ist. Im Folgenden werden die Details erläutert.

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

Die App-Komponente im obigen Beispiel enthält ein h1-Element mit Inline-Styles, die über das style-Attribut definiert werden. Zu den wichtigsten Punkten im Zusammenhang mit Inline-Styles gehören:

  • Eigenschaftsnamen mit zwei oder mehr Wörtern sollten der Camel-Case-Notation (camelCase) folgen. Anstelle der CSS-Eigenschaft font-weight wird beispielsweise fontWeight verwendet;
  • Bei der Zuweisung von Werten zu CSS-Eigenschaften werden in der Regel Strings verwendet, mit Ausnahme von Eigenschaften, die reine Zahlen erwarten. Daher erhält die Eigenschaft fontWeight den Wert als Zahl (700), während die Eigenschaft fontSize einen String-Wert (32px) verwendet.

Inline-Styles in Form eines separaten Objekts

Um unseren JSX-Code übersichtlich und fokussiert zu halten, können die Inline-Styles als separates JavaScript-Objekt definiert und anschließend diesem Objekt dem style-Attribut zugewiesen werden. Dieser Ansatz verbessert die Wartbarkeit und Lesbarkeit unserer Komponenten.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

In diesem Beispiel wird das appStyles-Objekt eingeführt, das die gleichen Styles wie zuvor enthält, jedoch nun als separates Objekt. Diese Trennung der Verantwortlichkeiten erhöht die Übersichtlichkeit des Komponenten-Codes.

1. Was ist der Hauptunterschied zwischen der Anwendung von Styles in HTML und der Verwendung von Inline-Styles in React?

2. Welche Notation sollte verwendet werden, wenn Eigenschaftsnamen mit zwei oder mehr Wörtern in Inline-Styles definiert werden?

question mark

Was ist der Hauptunterschied zwischen der Anwendung von Styles in HTML und der Verwendung von Inline-Styles in React?

Select the correct answer

question mark

Welche Notation sollte verwendet werden, wenn Eigenschaftsnamen mit zwei oder mehr Wörtern in Inline-Styles definiert werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 2.17

bookVerwendung von Inline-Stilen in React

Swipe um das Menü anzuzeigen

Ein unkomplizierter, jedoch etwas eingeschränkter Ansatz zur Stilzuweisung ist die Verwendung von Inline-Styles, ähnlich wie bei der Anwendung von Styles auf HTML-Elemente mit dem style-Attribut. In React besteht der einzige Unterschied darin, dass der Wert dieses Attributs ein Objekt und kein String ist. Im Folgenden werden die Details erläutert.

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

Die App-Komponente im obigen Beispiel enthält ein h1-Element mit Inline-Styles, die über das style-Attribut definiert werden. Zu den wichtigsten Punkten im Zusammenhang mit Inline-Styles gehören:

  • Eigenschaftsnamen mit zwei oder mehr Wörtern sollten der Camel-Case-Notation (camelCase) folgen. Anstelle der CSS-Eigenschaft font-weight wird beispielsweise fontWeight verwendet;
  • Bei der Zuweisung von Werten zu CSS-Eigenschaften werden in der Regel Strings verwendet, mit Ausnahme von Eigenschaften, die reine Zahlen erwarten. Daher erhält die Eigenschaft fontWeight den Wert als Zahl (700), während die Eigenschaft fontSize einen String-Wert (32px) verwendet.

Inline-Styles in Form eines separaten Objekts

Um unseren JSX-Code übersichtlich und fokussiert zu halten, können die Inline-Styles als separates JavaScript-Objekt definiert und anschließend diesem Objekt dem style-Attribut zugewiesen werden. Dieser Ansatz verbessert die Wartbarkeit und Lesbarkeit unserer Komponenten.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

In diesem Beispiel wird das appStyles-Objekt eingeführt, das die gleichen Styles wie zuvor enthält, jedoch nun als separates Objekt. Diese Trennung der Verantwortlichkeiten erhöht die Übersichtlichkeit des Komponenten-Codes.

1. Was ist der Hauptunterschied zwischen der Anwendung von Styles in HTML und der Verwendung von Inline-Styles in React?

2. Welche Notation sollte verwendet werden, wenn Eigenschaftsnamen mit zwei oder mehr Wörtern in Inline-Styles definiert werden?

question mark

Was ist der Hauptunterschied zwischen der Anwendung von Styles in HTML und der Verwendung von Inline-Styles in React?

Select the correct answer

question mark

Welche Notation sollte verwendet werden, wenn Eigenschaftsnamen mit zwei oder mehr Wörtern in Inline-Styles definiert werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2
some-alt