React: ¿Cómo encapsulo los estilos?

Supongo que ha visto este documento sobre cómo hacemos estilos en línea: http://facebook.github.io/react/tips/inline-styles.html

Nuestros estilos se comportan igual que los estilos del navegador. Todavía no tenemos una solución tan limpia como el DOM de sombra para la encapsulación de estilo, pero la web ha existido durante muchos años sin DOM de sombra, por lo que es ciertamente posible diseñar sitios web utilizando las reglas de estilo nativas del navegador :).

Una cosa que puede hacer es definir una clase de restablecimiento de estilo, que restablece los estilos a sus valores predeterminados, y luego puede anular los valores predeterminados con selectores más específicos.

Alternativamente, puede crear un objeto de estilo en línea base que tenga todos sus estilos predeterminados, importar ese objeto en todas partes y, cuando desee aplicar un estilo específico, copie ese objeto y anule los estilos que desea establecer usando Object.assign . Si desea ser realmente elegante, puede hacer que sus componentes combinen el estilo (con el objeto de restablecimiento de estilo que cree) automáticamente, para que sus webdevs puedan usar los componentes sin ver el código de restablecimiento de estilo.

Esos son mis dos centavos. cc @spicyj

PD: Dado que esta es más una pregunta de uso que un error en React, seguiré adelante y cerraré el problema. Siéntase libre de continuar la conversación en este hilo (cerrar el problema en su mayoría solo lo quita de nuestro radar para fines de desarrollo). Un lugar ideal para preguntas como esta sería StackOverflow.

Tiendo a recomendar el uso de nombres de clase al estilo BEM que son globalmente únicos, generalmente dentro del ámbito del nombre del componente:

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

y luego en su CSS, intente evitar el uso de selectores descendientes, a favor de nombres de clase única. Esto tiende a promover el aislamiento del estilo y la separación de componentes; facilita la composición de componentes sin que los estilos se desmoronen.

El traje es otra gran opción porque tiene una excelente herramienta de punta (retrabajo) y validadores de conformidad para brindar una protección automatizada de que sus estilos no se desangran.

Esto parece una solución interesante: https://github.com/Wildhoney/ReactShadow

Otra posible solución es http://projects.formidablelabs.com/radium/

Prefiero los estilos en línea siempre que sea posible, luego, cuando se vuelva demasiado complejo, use algo como BEM, como lo recomienda @spicyj. También me gusta SuitCSS, que combina bien con React en mi experiencia.