Einführung
In Frontend-Projekten, die selten eine Single-Page-App erfordern, werden Inline-Stile von DOM-Elementen häufig in den Zielelementen platziert >'-Attribut.
Aber in React sieht es beim Inline-Styling ganz anders aus. Dieser Leitfaden konzentriert sich darauf, dies anhand eines realen Beispiels für die Erstellung einer Benutzerprofilkartenkomponente zu erreichen.
Styling-Komponenten in React
Möglicherweise kennen Sie bereits die übliche Art und Weise, React-Komponenten mithilfe des Attributs „classname“ in Verbindung mit einem externen Stylesheet zu formatieren:
import React from 'react' import './style.css' function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) } jsx
paragraph-text{ font-weight: bold; color: beige; } CSS
Inline-Stile
Das gleiche Ergebnis mit Inline-Stilen zu erzielen, funktioniert ganz anders. Um Inline-Stile in React zu verwenden, verwenden Sie das style-Attribut, das ein JavaScript-Objekt mit Camel-Eigenschaften akzeptiert. Beispiel:
function MyComponent(){ return Inline Styled Component } Beachten Sie, dass der Füllwert keine Einheit hat, da React eine hinzufügt 'px ' Suffix für einige numerische Inline-Stileigenschaften. In Fällen, in denen Sie andere Einheiten wie „em“ oder „rem“ verwenden müssen, geben Sie die Einheit explizit mit dem Wert als Zeichenfolge an. Wenn Sie dies auf die Eigenschaft padding anwenden, sollte padding lauten: „1,5em“ .
Außerdem werden diese Stile nicht automatisch mit einem Herstellerpräfix versehen, sodass Sie Herstellerpräfixe manuell hinzufügen müssen.
Verbessern Sie die Lesbarkeit
Die Lesbarkeit von MyComponent nimmt dramatisch ab, wenn die Stile zu viele werden und alles unübersichtlich wird. Da Stile, wie unten gezeigt, nur Objekte sind, können sie aus der Komponente entfernt werden.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Erstellen einer Kartenkomponente
Lassen Sie uns die Benutzerkartenkomponente erstellen.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> } Faustregel
Die offizielle React-Dokumentation kritisiert die Verwendung von Inline-Styling als primäres Mittel zur Gestaltung von Projekten und empfiehlt stattdessen die Verwendung des className-Attributs.
Hinweis Einige Beispiele in der Dokumentation verwenden der Einfachheit halber einen Stil, es wird jedoch im Allgemeinen nicht empfohlen, das Stilattribut als primäres Mittel zur Gestaltung von Elementen zu verwenden.
In den meisten Fällen, Klassenname s sollten sich auf Klassen beziehen, die in einem externen CSS-Stylesheet definiert sind. Stile werden in React-Apps häufig verwendet, um beim Rendern dynamisch berechnete Stile hinzuzufügen.