Mir ist bewusst, dass Sie Stile in React-Klassen wie folgt angeben können:
var MyDiv = React.createClass({
render: function() {
var style = {
color: 'white',
fontSize: 200
};
return <div style={style}> Have a good and productive day! </div>;
}
});
Sollte ich versuchen, alle Stile auf diese Weise zu erstellen, und in meiner CSS-Datei überhaupt keine Stile angegeben haben?
Oder sollte ich Inline-Stile komplett vermeiden?
Es scheint seltsam und chaotisch, ein bisschen von beidem zu machen - zwei Stellen müssten überprüft werden, wenn das Styling optimiert wird.
css
reactjs
inline-styles
react-jsx
eye_mew
quelle
quelle
Antworten:
Es gibt noch nicht viele "Best Practices". Diejenigen von uns, die Inline-Stile für React-Komponenten verwenden, experimentieren immer noch sehr viel.
Es gibt eine Reihe von Ansätzen, die stark variieren: Reagieren Sie auf ein Inline-Lib-Vergleichstabelle
Alles oder nichts?
Was wir als "Stil" bezeichnen, beinhaltet tatsächlich einige Konzepte:
Beginnen Sie mit Statusstilen
React verwaltet bereits den Status Ihrer Komponenten. Dadurch eignen sich Status- und Verhaltensstile auf natürliche Weise für die Colocation mit Ihrer Komponentenlogik.
Anstatt Komponenten zum Rendern mit bedingten Statusklassen zu erstellen, sollten Sie Statusstile direkt hinzufügen:
Beachten Sie, dass wir eine Klasse verwenden, um das Erscheinungsbild zu gestalten, aber keine
.is-
vorangestellte Klasse mehr für Status und Verhalten verwenden .Wir können
Object.assign
(ES6) oder_.extend
(Unterstrich / lodash) verwenden, um Unterstützung für mehrere Zustände hinzuzufügen:Anpassung und Wiederverwendbarkeit
Jetzt, da wir es verwenden
Object.assign
, wird es sehr einfach, unsere Komponente mit verschiedenen Stilen wiederverwendbar zu machen. Wenn wir die Standardstile überschreiben möchten, können wir dies an der Aufrufstelle mit Requisiten tun, wie zum Beispiel :<TodoItem dueStyle={ fontWeight: "bold" } />
. So implementiert:Layout
Persönlich sehe ich keinen zwingenden Grund für Inline-Layoutstile. Es gibt eine Reihe großartiger CSS-Layoutsysteme. Ich würde nur einen verwenden.
Fügen Sie Ihrer Komponente jedoch keine Layoutstile direkt hinzu. Wickeln Sie Ihre Komponenten mit Layoutkomponenten ein. Hier ist ein Beispiel.
Zur Unterstützung des Layouts versuche ich oft, Komponenten so zu gestalten, dass sie
100%
width
und sindheight
.Aussehen
Dies ist der umstrittenste Bereich der Debatte im "Inline-Stil". Letztendlich liegt es an der Komponente, die Sie entwerfen, und am Komfort Ihres Teams mit JavaScript.
Eines ist sicher, Sie benötigen die Unterstützung einer Bibliothek. Browserzustände (
:hover
,:focus
) und Medienabfragen sind in Raw React schmerzhaft.Ich mag Radium, weil die Syntax für diese harten Teile so gestaltet ist, dass sie die von SASS modelliert.
Code-Organisation
Oft sehen Sie ein Stilobjekt außerhalb des Moduls. Für eine Aufgabenlistenkomponente könnte sie ungefähr so aussehen:
Getter-Funktionen
Das Hinzufügen einer Reihe von Stillogiken zu Ihrer Vorlage kann etwas chaotisch werden (wie oben gezeigt). Ich mag es, Getter-Funktionen zu erstellen, um Stile zu berechnen:
Weiter beobachten
All dies habe ich Anfang dieses Jahres auf der React Europe ausführlicher besprochen: Inline-Stile und wann es am besten ist, nur CSS zu verwenden .
Ich helfe Ihnen gerne dabei, neue Entdeckungen zu machen :) Schlagen Sie mich an -> @chantastic
quelle
div
,span
,a
etc. wird es behalten Stil unabhängig von isoliert Hilfe , die Bibliothek , die Sie verwenden. reactpatterns.com/#Style componentDas style-Attribut in React erwartet, dass der Wert ein Objekt ist, dh ein Schlüsselwertpaar.
style = {}
wird ein anderes Objekt darin haben{float:'right'}
, damit es funktioniert.Hoffe das löst das Problem
quelle
style
Requisite, der zu Leistungsproblemen führen kann. Definieren Sie zumindest einen konstanten Stil wie diesen außerhalb Ihresrender
. Hoffe das hilft!Ich verwende Inline-Stile häufig in meinen React-Komponenten. Ich finde es viel klarer, Stile innerhalb von Komponenten zu sortieren, weil immer klar ist, welche Stile die Komponente hat und welche nicht. Darüber hinaus vereinfacht die volle Leistung von Javascript die komplexeren Styling-Anforderungen.
Anfangs war ich nicht überzeugt, aber nachdem ich mich einige Monate damit beschäftigt habe, bin ich vollständig konvertiert und bin dabei, mein gesamtes CSS in Inline- oder andere JS-gesteuerte CSS-Methoden zu konvertieren.
Diese Präsentation des Facebook-Mitarbeiters und React-Mitarbeiters "vjeux" ist ebenfalls sehr hilfreich - https://speakerdeck.com/vjeux/react-css-in-js
quelle
CSS Modules
,styled-components
und andere.Der Hauptzweck des Stilattributs sind dynamische, zustandsbasierte Stile. Sie können beispielsweise einen Breitenstil für einen Fortschrittsbalken basierend auf einem bestimmten Status oder die Position oder Sichtbarkeit basierend auf einem anderen Status festlegen.
Stile in JS unterliegen der Einschränkung, dass die Anwendung kein benutzerdefiniertes Design für eine wiederverwendbare Komponente bereitstellen kann. Dies ist in den oben genannten Situationen durchaus akzeptabel, jedoch nicht, wenn Sie die sichtbaren Eigenschaften, insbesondere die Farbe, ändern.
quelle
<div><a>foo <b>bar</b></a><table>...</table></div>
wie stylen Sie das aus Requisiten? Denken Sie daran, dass die HTML-Struktur ein Implementierungsdetail bleiben sollte, da Sie sonst viele der Vorteile verlieren, die Komponenten bieten.James K Nelson erklärt in seinem Brief "Warum Sie Komponenten nicht mit JavaScript reagieren sollten" , dass es eigentlich nicht erforderlich ist, Inline-Stile mit ihren Nachteilen zu verwenden. Seine Aussage ist, dass altes langweiliges CSS mit weniger / scss die beste Lösung ist. Der Teil seiner Thesen zugunsten von CSS:
quelle
Das Styling in JSX ist dem Styling in HTML sehr ähnlich.
HTML-Fall:
JSX-Fall:
quelle
Ich gebe jeder meiner wiederverwendbaren Komponenten einen eindeutigen benutzerdefinierten Elementnamen und erstelle dann eine CSS-Datei für diese Komponente, insbesondere mit allen Stiloptionen für diese Komponente (und nur für diese Komponente).
In der Datei 'custom-component.css' beginnt jeder Eintrag mit dem Tag custom-component:
Das heißt, Sie verlieren nicht den kritischen Gedanken der Trennung von Bedenken. Ansicht gegen Stil. Wenn Sie Ihre Komponente freigeben, ist es für andere einfacher, sie so zu gestalten, dass sie mit dem Rest ihrer Webseite übereinstimmt.
quelle
Es hängt wirklich davon ab, wie groß Ihre Anwendung ist, ob Sie Bundler wie Webpack verwenden und CSS und JS zusammen im Build bündeln möchten und wie Sie Ihren Anwendungsfluss verwalten möchten ! Am Ende des Tages können Sie abhängig von Ihrer Situation eine Entscheidung treffen!
Meine Vorliebe für das Organisieren von Dateien in großen Projekten ist das Trennen von CSS- und JS- Dateien. Es könnte einfacher sein, sie zu teilen, und es ist für Benutzeroberflächen einfacher, nur CSS-Dateien durchzugehen. Außerdem ist die Organisation von Dateien für die gesamte Anwendung viel einfacher!
Denken Sie immer so, stellen Sie sicher, dass in der Entwicklungsphase alles dort ist, wo es sein sollte, richtig benannt und für andere Entwickler leicht zu finden ist ...
Ich persönlich mische sie abhängig von meinem Bedarf, zum Beispiel ... Versuchen Sie, externes CSS zu verwenden, aber wenn nötig, akzeptiert React auch den Stil. Sie müssen ihn als Objekt mit Schlüsselwert übergeben, wie folgt:
quelle
Hier ist das boolesche Styling in JSX- Syntax:
quelle
Normalerweise ist jeder React-Komponente eine scss-Datei zugeordnet. Aber ich sehe keinen Grund, warum Sie die Komponente nicht mit Logik kapseln und darin suchen würden. Ich meine, Sie haben ähnliche Dinge mit Webkomponenten.
quelle
Abhängig von Ihrer Konfiguration kann Ihnen das Inline-Styling ein Hot-Reload bieten. Die Webseite wird bei jeder Änderung des Stils sofort neu gerendert. Dies hilft mir, Komponenten schneller zu entwickeln. Ich bin mir jedoch sicher, dass Sie eine Hot-Reload-Umgebung für CSS + SCSS einrichten können.
quelle
Sie können Inline-Stile verwenden, aber Sie haben einige Einschränkungen, wenn Sie sie in all Ihren Stilen verwenden. Einige bekannte Einschränkungen sind, dass Sie keine CSS-Pseudo-Selektoren und Medienabfragen verwenden können können.
Sie können Radium verwenden , um dies zu lösen, aber ich denke, dass das Projekt wächst und umständlich wird.
Ich würde empfehlen, CSS-Module zu verwenden .
mit CSS - Module werden Sie die Freiheit haben CSS in CSS - Datei zu schreiben und haben keine Sorgen zu machen über die Namensgebung Auseinandersetzungen, wird es von CSS - Module versorgt werden.
Ein Vorteil dieser Methode besteht darin, dass Sie der jeweiligen Komponente Styling-Funktionen geben können. Dadurch wird ein viel besser wartbarer Code und eine besser lesbare Projektarchitektur erstellt, damit der nächste Entwickler an Ihrem Projekt arbeiten kann.
quelle
Für einige Komponenten ist es einfacher, Inline-Stile zu verwenden. Außerdem finde ich es einfacher und prägnanter (da ich Javascript und nicht CSS verwende), Komponentenstile zu animieren.
Für eigenständige Komponenten verwende ich den 'Spread Operator' oder das '...'. Für mich ist es klar, schön und funktioniert auf engstem Raum. Hier ist eine kleine Ladeanimation, die ich erstellt habe, um die Vorteile zu zeigen:
EDIT NOVEMBER 2019
Ich arbeite in der Branche (ein Fortune 500-Unternehmen) und darf KEIN Inline-Styling vornehmen. In unserem Team haben wir entschieden, dass Inline-Stile nicht lesbar und nicht wartbar sind. Und nachdem ich aus erster Hand gesehen habe, wie Inline-Stile die Unterstützung einer Anwendung völlig unerträglich machen, muss ich zustimmen. Ich rate von Inline-Stilen völlig ab.
quelle
Das Problem mit Inline-Stilen besteht darin, dass Content Security Policies (CSP) immer häufiger eingesetzt werden und dies nicht zulassen. Daher empfehle ich, Inline-Stile vollständig zu vermeiden.
Update: Zur weiteren Erläuterung sind CSP vom Server gesendete HTTP-Header, die einschränken, welche Inhalte auf der Seite angezeigt werden können. Es ist einfach eine weitere Abschwächung, die auf einen Server angewendet werden kann, um einen Angreifer davon abzuhalten, etwas Unartiges zu tun, wenn der Entwickler die Site schlecht codiert.
Die meisten dieser Einschränkungen dienen dazu, XSS-Angriffe (Cross-Site Scripting) zu stoppen. In XSS findet ein Angreifer eine Möglichkeit, sein eigenes Javascript in Ihre Seite aufzunehmen (wenn ich beispielsweise meinen Benutzernamen gebe
bob<SCRIPT>alert("hello")</SCRIPT>
und dann einen Kommentar poste und Sie die Seite besuchen, sollte keine Warnung angezeigt werden). Entwickler sollten die Möglichkeit verweigern, dass ein Benutzer der Site Inhalte wie diese hinzufügt. Falls sie jedoch einen Fehler gemacht haben, blockiert CSP das Laden der Seite, wenn sie welche findetscript>
Tags gefunden werden.CSP sind nur ein zusätzlicher Schutz für Entwickler, um sicherzustellen, dass ein Angreifer den Besuchern dieser Site keine Probleme bereiten kann, wenn sie einen Fehler gemacht haben.
Das ist also alles XSS, aber was ist, wenn der Angreifer keine
<script>
Tags einschließen kann, sondern<style>
Tags oder einenstyle=
Parameter in ein Tag einfügen kann? Dann kann er möglicherweise das Erscheinungsbild der Website so ändern, dass Sie dazu verleitet werden, auf die falsche Schaltfläche oder ein anderes Problem zu klicken. Dies ist viel weniger besorgniserregend, aber dennoch zu vermeiden, und CSP erledigt dies für Sie.Eine gute Ressource zum Testen einer Site für CSP ist https://securityheaders.io/
Weitere Informationen zu CSP finden Sie unter: http://www.html5rocks.com/en/tutorials/security/content-security-policy/
quelle
unsafe-inline
Richtlinie. Diese Richtlinie ermöglicht die Beschränkung eines Stilelements<style>
auf Inline-Stile, die auf das Stilattribut eines Elements angewendet werden :<div style="">
. Da sich die obige Frage auf das Stilattribut bezieht, scheint dies ein schlechter Rat zu sein, um Inline-Stile vollständig zu vermeiden. Außerdemreact
wirdunsafe-inline
deaktiviert alle Formen von Inline-Stilen, einschließlich des Stilattributs. Sie können die Stil-APIs für ein Element programmgesteuert über JS verwenden (z. B.elem.style.color = 'blue';
), aber Sie können das Stilattribut nicht für ein Element festlegen (genau wie'unsafe-inline'
in der Anweisung script-src sind Inline-Skript-Tags, aber auchonclick
Attribute und Freunde nicht zulässig .)Im Vergleich zum Schreiben Ihrer Stile in eine CSS-Datei bietet das Stilattribut von React die folgenden Vorteile :
Das Stilattribut von React weist jedoch einige Nachteile auf - dies ist nicht möglich
Mit CSS in JS können Sie alle Vorteile eines Style-Tags ohne diese Nachteile nutzen . Ab heute gibt es einige beliebte, gut unterstützte CSS in js-Bibliotheken, darunter: Emotion, Styled-Components und Radium. Diese Bibliotheken sind eine Art CSS, was React to HTML ist. Mit ihnen können Sie Ihr CSS schreiben und Ihr CSS in Ihrem JS-Code steuern.
Vergleichen wir, wie unser Code aussehen wird, um ein einfaches Element zu gestalten. Wir werden ein "Hallo Welt" -Div so gestalten, dass es auf dem Desktop groß und auf dem Handy kleiner angezeigt wird.
Verwenden des Stilattributs
Da eine Medienabfrage in einem Style-Tag nicht möglich ist, müssen wir dem Element einen Klassennamen hinzufügen und eine CSS-Regel hinzufügen.
Verwenden des 10-CSS-Tags von Emotion
Emotion unterstützt auch Vorlagenzeichenfolgen sowie gestaltete Komponenten. Wenn Sie es vorziehen, können Sie schreiben:
Hinter den Hauben verwendet "Css in JS" CSS-Klassen. Emotion wurde speziell für die Leistung entwickelt und verwendet Caching. Im Vergleich zu React-Stilattributen bietet Css in JS eine bessere Leistung.
Empfohlene Vorgehensweise
Hier sind einige Best Practices, die ich empfehle:
Das Reaktionscodierungsmuster besteht aus gekapselten Komponenten - HTML und JS, die eine Komponente steuern, werden in eine Datei geschrieben. Dort gehört Ihr CSS- / Style-Code zum Stylen dieser Komponente hin.
Fügen Sie Ihrer Komponente bei Bedarf eine Styling-Requisite hinzu. Auf diese Weise können Sie Code und Stil, die in einer untergeordneten Komponente geschrieben sind, wiederverwenden und von der übergeordneten Komponente an Ihre spezifischen Anforderungen anpassen.
quelle
Sie können auch StrCSS verwenden, es erstellt isolierte Klassennamen und vieles mehr! Beispielcode würde so aussehen. Sie können (optional) die VSCode-Erweiterung vom Visual Studio Marketplace installieren, um Unterstützung für die Syntaxhervorhebung zu erhalten!
Quelle: strcss
quelle
Einige Zeit müssen wir ein Element aus einer Komponente formatieren, aber wenn wir nur diese Komponente anzeigen müssen oder der Stil so gering ist, verwenden wir anstelle der CSS-Klasse den Inline-Stil in react js. Der Inline-Stil von reactjs ist der gleiche wie der HTML-Inline-Stil, nur die Eigenschaftsnamen unterscheiden sich ein wenig
Schreiben Sie Ihren Stil in ein beliebiges Tag mit style = {{prop: "value"}}
quelle
Update 2020: Die beste Vorgehensweise besteht darin, eine Bibliothek zu verwenden, die bereits die harte Arbeit für Sie geleistet hat und Ihr Team nicht umbringt, wenn Sie den Wechsel vornehmen, wie in der ursprünglich akzeptierten Antwort in diesem Video gezeigt (es ist immer noch relevant). Auch um ein Gefühl für Trends zu bekommen, ist dies ein sehr hilfreiches Diagramm . Nachdem ich dies selbst recherchiert hatte, entschied ich mich, Emotion für meine neuen Projekte zu verwenden, und es hat sich als sehr flexibel und skalierbar erwiesen.
Angesichts der am besten bewerteten Antwort aus dem Jahr 2015 wurde Radium empfohlen, das nun in den Wartungsmodus verbannt wird . Es erscheint daher sinnvoll, eine Liste von Alternativen hinzuzufügen. Der Beitrag , der Radium abbricht, schlägt einige Bibliotheken vor. Auf jeder der verlinkten Websites sind Beispiele verfügbar, daher werde ich den Code hier nicht kopieren und einfügen.
quelle
Auf jeden Fall wird Inline-CSS niemals empfohlen. In unserem Projekt, das auf JSS basiert, haben wir gestylte Komponenten verwendet. Es schützt das Überschreiben von CSS durch Hinzufügen dynamischer Klassennamen zu Komponenten. Sie können auch CSS-Werte basierend auf den übergebenen Requisiten hinzufügen.
quelle