React: Comment encapsuler les styles?

Je suppose que vous avez vu ce document sur la façon dont nous faisons des styles en ligne: http://facebook.github.io/react/tips/inline-styles.html

Nos styles se comportent de la même manière que les styles de navigateur. Nous n'avons pas encore de solution aussi propre que le shadow DOM pour l'encapsulation de style, mais le web existe depuis de nombreuses années sans shadow DOM, il est donc certainement possible de concevoir des sites Web en utilisant les règles de style natives du navigateur :).

Une chose que vous pouvez faire est de définir une classe de réinitialisation de style, qui réinitialise les styles à leurs valeurs par défaut, puis vous pouvez remplacer les valeurs par défaut avec des sélecteurs plus spécifiques.

Vous pouvez également créer un objet de style en ligne de base qui a tous vos styles par défaut, importer cet objet partout et lorsque vous souhaitez appliquer un style spécifique, vous copiez cet objet et remplacez les styles que vous souhaitez définir à l'aide de Object.assign . Si vous voulez vraiment avoir de la fantaisie, vous pouvez demander à vos composants de fusionner automatiquement le style (avec l'objet style-reset que vous créez), afin que vos webdev puissent simplement utiliser les composants sans voir le code de réinitialisation de style.

C'est mes deux cents. cc @spicyj

PS: Comme il s'agit plus d'une question d'utilisation que d'un bogue dans React, je vais continuer et clore le problème. N'hésitez pas à poursuivre la conversation dans ce fil de discussion (la fermeture du problème le retire principalement de notre radar à des fins de développement). Un endroit idéal pour des questions comme celle-ci serait StackOverflow.

J'ai tendance à recommander d'utiliser des noms de classe BEM-esque qui sont globalement uniques, généralement étendus par nom de composant:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

puis dans votre CSS, essayez d'éviter d'utiliser des sélecteurs descendants, en faveur de noms de classes uniques. Cela a tendance à favoriser l'isolation des styles et la séparation des composants - cela facilite la composition des composants sans que les styles ne s'effondrent.

Le costume est une autre excellente option car il possède un excellent outillage de nez (retouche) et des validateurs de conformité pour fournir une garantie automatisée que vos styles ne saignent pas.

Cela ressemble à une solution intéressante: https://github.com/Wildhoney/ReactShadow

Une autre solution potentielle est http://projects.formidablelabs.com/radium/

Je préfère les styles en ligne lorsque cela est possible, puis quand cela devient trop complexe, utilisez quelque chose comme BEM, comme recommandé par @spicyj. J'aime aussi SuitCSS, qui se marie bien avec React d'après mon expérience.