Verwendung 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-Eigenschaftfont-weight
wird beispielsweisefontWeight
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 EigenschaftfontSize
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?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Verwendung 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-Eigenschaftfont-weight
wird beispielsweisefontWeight
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 EigenschaftfontSize
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?
Danke für Ihr Feedback!