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

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.

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

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

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

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.

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

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

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.

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;

Hier ist das boolesche Styling in JSX- Syntax:

style={{display: this.state.isShowing ? "inherit" : "none"}}

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.

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.

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.

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.

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/

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?

2. 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?

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

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

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;

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.

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.