Best Practices für den Inline-Stil von React.j.

512

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.

eye_mew
quelle
Sie können das React-Theme verwenden , um Ihre Inline-Stile zu organisieren und sie beim Erstellen einer wiederverwendbaren Komponente leicht anpassbar zu machen. Es funktioniert ähnlich wie ThemeManager in material-ui .
Mantramantramantra
6
Erwägen Sie die Verwendung von github.com/css-modules/css-modules . github.com/gajus/react-css-modules ist eine React-Implementierung (deren Autor ich bin). CSS-Module und Reagieren CSS-Module ordnen Ihre Komponentenklassennamen automatisch CSS-Modulen zu, denen im Dokumentbereich ein eindeutiger Name zugewiesen wurde.
Gajus
1
Ich benutze CSS, während ich Medienabfragen schreiben muss. Ich verwende auch Klassen aus einer Basis-CSS-Bibliothek wie Bootstrap.
Vijayst
Die Verwendung des Stilattributs als primäres Mittel zum Stylen von Elementen wird im Allgemeinen nicht empfohlen. ( reactjs.org/docs/dom-elements.html#style )
Omid Ebrahimi
Ab heute empfehle ich die Verwendung einer CSS-in-JS-Lösung. Es hat alle Vorteile des Stilattributs ohne die Nachteile. Ich schrieb eine Antwort stackoverflow.com/questions/26882177/…
Ben Carp

Antworten:

463

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:

  • Layout - wie ein Element / eine Komponente im Verhältnis zu anderen aussieht
  • Aussehen - die Eigenschaften eines Elements / einer Komponente
  • Verhalten und Zustand - wie ein Element / eine Komponente in einem bestimmten Zustand aussieht

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:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

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:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

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:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

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.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Zur Unterstützung des Layouts versuche ich oft, Komponenten so zu gestalten, dass sie 100% widthund sind height.

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:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

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:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

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

chantastisch
quelle
10
Tolle Lektüre. Auch wirklich zu schätzen dieses relevant Gespräch von Ihnen, @chantastic. #accepted
eye_mew
5
"Wickeln Sie Ihre Komponenten mit Layout-Komponenten ein": So offensichtlich, aber genau das, was ich brauchte.
Tandrewnichols
2
@chantastic tolle Antwort. Ist ein Jahr später noch alles wahr? Ich habe mich gerade erst mit React und der Idee des Inline-Stylings befasst und mich gefragt, ob sich etwas geändert hat, seit Sie diese Antwort gepostet haben.
Alexrussell
4
@alexrussell danke! Ich denke, dass die Antwort hier immer noch ziemlich gut hält. Der einzige Bereich, der sich geändert hat, ist, dass Aphrodite die von der Community bevorzugte Inline-Stiles-Bibliothek (gegenüber Radium) zu sein scheint - obwohl dies wirklich eine Frage der persönlichen Präferenz ist.
chantastisch
2
@alexrussell oops. versehentlich vorzeitig eingereicht. Ich benutze jetzt diese Komponententechnik, um meine Komponenten zu stylen. Die Idee ist ziemlich einfach. Sie erstellen Komponenten , die nur mit der Anwendung von Art und compose mit denen, statt werden div, span, aetc. wird es behalten Stil unabhängig von isoliert Hilfe , die Bibliothek , die Sie verwenden. reactpatterns.com/#Style component
chantastic
135

Das 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.

<span style={{float:'right'}}>{'Download Audit'}</span>

Hoffe das löst das Problem

Anandharshan
quelle
3
Also
@PardeepJain Eine Möglichkeit ist die Verwendung von Emotion. Hier finden Sie eine vollständige Vorlesung, wenn Sie vom meet.js-Gipfel 2018
Bruno Finger
Ein Nachteil dieses Ansatzes besteht darin, dass durch das Inline-Definieren von Stilen jedes Mal ein neues Objekt erstellt wird. Dies führt zu einem Unterschied in der styleRequisite, der zu Leistungsproblemen führen kann. Definieren Sie zumindest einen konstanten Stil wie diesen außerhalb Ihres render. Hoffe das hilft!
Dawson B
49

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

Kyle Mathews
quelle
5
Wie werde ich reaktionsschnelle Layouts mit Inline-Stilen erstellen? Sie haben hier keine Möglichkeit für Medienabfragen.
Zeus
Sie erhalten die Leistung von js. Js kann Browsergrößen erkennen, um Stile dynamisch zu erstellen.
JordyvD
3
da es viel leistungsfähiger Lösungen für das Styling - Komponenten wie @ g3mini , die jetzt keine empfohlene Ansatz ist, sowieso sind CSS Modules, styled-componentsund andere.
Denialos
Es gibt auch CSS in js =) Ich bevorzuge im Moment jedoch die Verwendung von CSS-Modulen.
JordyvD
Eine Sache, die hier nicht berücksichtigt wird, ist, dass es sehr einfach ist, übergeordnete und untergeordnete Stile in derselben SASS-Datei zu sehen. Wenn Sie jedoch Regeln in verschiedenen Komponenten betrachten müssen, müssen Sie möglicherweise viele Dateien öffnen und schließen.
Ringo
23

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.

Räuber
quelle
Eine verwandte Idee, die wir seit einiger Zeit hatten, ist die Möglichkeit, bestimmte CSS-Regeln für eine React-Komponente mithilfe von gulp und LESS zu isolieren. Ein bisschen wie das Festlegen eines bestimmten Klassennamens für jede Komponente und das Hinzufügen eines bestimmten CSS für diese Klasse in der Komponentendatei. Das wäre sehr sinnvoll.
David Hellsing
Ich verwende oft Klassennamen im Format "component- {app} - {componentName}". "{app}" kann der Name der Anwendung sein oder "common" für anwendungsunabhängige Komponenten. zB "component-foo-todo-list" für TodoList und "component-common-light-switch-toggle". Für gepackte Komponenten wäre {app} der Name npm. Beziehen Sie sich darauf?
Brigand
Ja, die Namenskonvention ist eine Sache, aber die Hauptsache wäre, isolierte CSS-Regeln in dieselbe js-Komponentendatei einzufügen.
David Hellsing
2
Das ist nicht wahr. Sie können definitiv ein benutzerdefiniertes Styling anwenden, um auf Komponenten zu reagieren. Die Komponente muss lediglich ihr eigenes Stilobjekt mit einem von oben übergebenen Objekt zusammenführen, das aus Anwendungsdaten stammen kann. Siehe letzte Folien von Speakerdeck.com/vjeux/react-css-in-js wie unten erwähnt
Flion
Sicher, wenn Ihre Komponente ein einzelnes Element ist, aber <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.
Brigand
18

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:

  • extern erweiterbar
  • hebelbar (Inline-Stile überspringen alles)
  • Designer-freundlich
alex_1948511
quelle
10

Das Styling in JSX ist dem Styling in HTML sehr ähnlich.

HTML-Fall:

div style = "Hintergrundfarbe: rot; Farbe: weiß"

JSX-Fall:

div style = {{backgroundColor: 'red', color: 'white'}}

Vivek Mehta
quelle
8

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).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

In der Datei 'custom-component.css' beginnt jeder Eintrag mit dem Tag custom-component:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

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.

verwitwet
quelle
So mache ich es. Der einzige Nachteil ist, dass es zwei Dateien statt einer sind. Ich kann damit leben.
Sauce
5

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:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;
Alireza
quelle
5

Hier ist das boolesche Styling in JSX- Syntax:

style={{display: this.state.isShowing ? "inherit" : "none"}}
Anupam Maurya
quelle
3

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.

dakt
quelle
3

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.

Kerl
quelle
3

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.

Praveen Rao Chavan.G
quelle
3

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:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

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.

VocoJax
quelle
2

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 einen style=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/

0xdabbad00
quelle
Können Sie uns etwas mehr erklären?
Dmitry Manannikov
8
Sie beziehen sich speziell auf die unsafe-inlineRichtlinie. 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ßerdem reactwird
empfohlen
1
@potench dieser Link war wirklich toll, möglicherweise verdient seine eigene Antwort
eye_mew
6
Leider ist die Antwort von @eye_mew und @ Sam-Rad - @potench nicht korrekt. CSP unsafe-inlinedeaktiviert 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 auch onclickAttribute und Freunde nicht zulässig .)
Alex Sexton
2
Weitere Informationen des Facebook-Teams zur Anwendung von Stilen in Bezug auf CSP finden Sie in React v15 unter github.com/facebook/react/issues/5878 . Eine Lektüre wert
Mark Lundin
2

Im Vergleich zum Schreiben Ihrer Stile in eine CSS-Datei bietet das Stilattribut von React die folgenden Vorteile :

  1. Die Möglichkeit, die Tools Javascript als Programmiersprache zu verwenden, ermöglicht die Steuerung des Stils Ihrer Elemente. Dies umfasst das Einbetten von Variablen, das Verwenden von Bedingungen und das Übergeben von Stilen an eine untergeordnete Komponente.
  2. Ein "Komponenten" -Ansatz. Keine Trennung von HTML-, JS- und CSS-Code mehr, der für die Komponente geschrieben wurde. Der Code der Komponente wird konsolidiert und an einer Stelle geschrieben.

Das Stilattribut von React weist jedoch einige Nachteile auf - dies ist nicht möglich

  1. Medienabfragen können nicht verwendet werden
  2. Kann keine Pseudo-Selektoren verwenden,
  3. weniger effizient im Vergleich zu CSS-Klassen.

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

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

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.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Verwenden des 10-CSS-Tags von Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion unterstützt auch Vorlagenzeichenfolgen sowie gestaltete Komponenten. Wenn Sie es vorziehen, können Sie schreiben:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

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:

  1. Wenn Sie Ihre Elemente inline oder in Ihrem JS formatieren möchten, verwenden Sie eine css-in-js-Bibliothek und kein Stilattribut.

Sollte ich versuchen, alle Stile auf diese Weise zu erstellen, und in meiner CSS-Datei überhaupt keine Stile angegeben haben?

  1. Wenn Sie eine CSS-in-JS-Lösung verwenden, müssen Sie keine Stile in CSS-Dateien schreiben. Das Schreiben Ihres CSS in JS ist überlegen, da Sie alle Tools verwenden können, die eine Programmiersprache wie JS bietet.

sollte ich Inline-Stile komplett vermeiden?

  1. Die Strukturierung Ihres Stilcodes in JS ähnelt der Strukturierung Ihres Codes im Allgemeinen. Zum Beispiel:
    • Erkennen Sie sich wiederholende Stile und schreiben Sie sie an eine Stelle. In Emotion gibt es zwei Möglichkeiten, dies zu tun:
// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}
  • 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.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)
Ben Carp
quelle
2

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

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}
Jeffrey Lanters
quelle
1

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"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;
ABHIJEET KHIRE
quelle
Könnten Sie bitte weitere Informationen darüber hinzufügen, wie und warum dieser Code eine Antwort auf die Frage von OP bietet? Vielen Dank!
DeHaar
1

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.

  • Emotionen, die von Stilkomponenten "inspiriert" sind unter anderem verwendet Stile in js und Rahmen Agnostiker sein, aber auf jeden Fall fördert seine Bibliothek React. Die Emotionen wurden ab diesem Beitrag auf dem neuesten Stand gehalten.
  • styled-components ist vergleichbar und bietet viele der gleichen Funktionen wie Emotion. Auch aktiv gepflegt. Sowohl Emotion- als auch Styled-Komponenten haben eine ähnliche Syntax. Es wurde speziell für die Arbeit mit React-Komponenten entwickelt.
  • JSS Eine weitere Option für Stile in js, die Framework-unabhängig ist, obwohl sie eine Reihe von Framework-Paketen enthält, darunter React-JSS.
SamsonTheBrave
quelle
0

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.

Shivang Gupta
quelle