Legen Sie die Hintergrundfarbe mit Inline-Stilen in React fest

1. Inline-Stile in React
2. Legen Sie die Hintergrundfarbe mit dem Inline-Stil in React fest
3. Abschluss

Die Möglichkeit, Stile und Klassen dynamisch anzuwenden, ist eine der besten Funktionen von React. In diesem Artikel wird erläutert, wie Sie Inline-Stile festlegen, um die Hintergrundfarbe in React zu ändern.

Inline-Stile in React

Mit Inline-Stilen können Sie Elemente direkt in JSX, einer Vorlagensprache von React, formatieren. Es hilft Ihnen, Ihre React-Anwendung einfach zu strukturieren.

Sie können Inline-Stile in React anwenden, genau wie in HTML. Es gibt jedoch einige Unterschiede zwischen Inline-Stilen und CSS-Stilen.

JSX sieht HTML sehr ähnlich, aber es ist Syntaxzucker zum Schreiben von JavaScript. Aus diesem Grund müssen alle CSS-Regeln als JavaScript-Objekt formatiert werden.

Einzelne Stile müssen als Schlüssel-Wert-Paare in Objekten geschrieben werden. CSS-Eigenschaften, die ein Bindestrich trennen würde, werden zusammengeschoben.

Beispielsweise wird die CSS-Eigenschaft font-size zu fontSize und so weiter. Die Werte dieser Eigenschaften müssen Zeichenfolgen, ganze Zahlen oder boolesche Werte sein.

Legen Sie die Hintergrundfarbe mit dem Inline-Stil in React fest

Gemäß den erwähnten Regeln wird die CSS-Eigenschaft background-color in React-Inline-Stilen zu backgroundColor. Der Wert dieser Eigenschaft muss eine Zeichenfolge sein, entweder eine benannte Farbe.

Syntax:

<div style={{ backgroundColor: "red"}}></div>

Alternativ können Sie HEX-Codes oder RGBA verwenden, genau wie in CSS.

<div style={{ backgroundColor: "#ff0000"}}></div>

Sehen wir uns ein Beispiel an, wie man Inline-Stile in React anwendet.

Code-Auszug:

import "./styles.css";

export default function App() {
  return <div style={{ backgroundColor: "red", padding: 100 }}></div>;
}

Ausgang:

Sie können für eine Live-Demo zu CodeSandbox gehen. Die Inline-Stile von React werden in normales CSS übersetzt, wenn Sie das Element untersuchen.

Abschluss

Viele Anfänger sind mit der Syntax von Inline-Stilen in React verwirrt. Wichtig ist, sich daran zu erinnern, dass CSS-Eigenschaften mit mehreren Wortnamen kombiniert werden und CamelCase.

Außerdem müssen Eigenschaftsnamen keine Zeichenfolgen sein. Schließlich müssen die Werte entweder eine Zeichenfolge, eine ganze Zahl oder ein boolescher Wert sein.