React: Como faço para encapsular estilos?

Suponho que você tenha visto este documento sobre como fazemos estilos inline: http://facebook.github.io/react/tips/inline-styles.html

Nossos estilos se comportam da mesma forma que os estilos do navegador. Ainda não temos uma solução tão limpa como o DOM de sombra para encapsulamento de estilo, mas a web existe há muitos anos sem o DOM de sombra, portanto, certamente é possível projetar sites usando as regras de estilo nativas do navegador :).

Uma coisa que você pode fazer é definir uma classe de redefinição de estilo, que redefine os estilos para o padrão, e então você pode substituir os padrões com seletores mais específicos.

Como alternativa, você pode criar um objeto de estilo embutido básico que tenha todos os seus estilos padrão, importar esse objeto em todos os lugares e, quando quiser aplicar um estilo específico, copie esse objeto e substitua os estilos que deseja definir usando Object.assign . Se você quiser ficar realmente sofisticado, pode fazer com que seus componentes façam a fusão de estilos (com o objeto de redefinição de estilo que você cria) automaticamente, para que seus webdevs possam usar os componentes sem ver o código de redefinição de estilo.

Esses são meus dois centavos. cc @spicyj

PS: Já que essa é mais uma questão de uso do que um bug no React, vou prosseguir e encerrar o problema. Sinta-se à vontade para continuar a conversa neste tópico (fechar o problema apenas tira isso do nosso radar para fins de desenvolvimento). Um lugar ideal para perguntas como essa seria StackOverflow.

Eu tendo a recomendar o uso de nomes de classe no estilo BEM que são globalmente únicos, geralmente com escopo definido pelo nome do componente:

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

e então, em seu CSS, tente evitar o uso de seletores descendentes, em favor de nomes de classe única. Isso tende a promover o isolamento e a separação do estilo dos componentes - torna mais fácil compor os componentes sem que os estilos se desintegrem.

O terno é outra ótima opção porque tem ótimas ferramentas de ponta (retrabalho) e validadores de conformidade para fornecer uma proteção automatizada de que seus estilos não estão sangrando.

Parece uma solução interessante: https://github.com/Wildhoney/ReactShadow

Outra solução potencial é http://projects.formidablelabs.com/radium/

Eu prefiro estilos inline sempre que possível, então quando ficar muito complexo, use algo como BEM, como recomendado por @spicyj. Eu também gosto de SuitCSS, que combina bem com React em minha experiência.