React: スタイルをカプセル化するにはどうすればよいですか？

インラインスタイルの実行方法についてこのドキュメントをご覧になったと思います： //facebook.github.io/react/tips/inline-styles.html

私たちのスタイルはブラウザのスタイルと同じように動作します。 スタイルカプセル化のためのシャドウDOMほどクリーンなソリューションはまだありませんが、WebはシャドウDOMなしで長年存在していたため、ブラウザーのネイティブスタイルルールを使用してWebサイトを設計することは確かに可能です:)。

できることの1つは、スタイルをデフォルトにリセットするスタイルリセットクラスを定義することです。その後、より具体的なセレクターでデフォルトをオーバーライドできます。

または、すべてのデフォルトスタイルを持つベースインラインスタイルオブジェクトを作成し、そのオブジェクトをどこにでもインポートし、特定のスタイルを適用する場合は、そのオブジェクトをコピーして、 Object.assignを使用して設定するスタイルを上書きすることもできます

それは私の2セントです。 cc @spicyj

PS：これはReactのバグというよりは使用法の質問なので、先に進んで問題を解決します。 このスレッドで自由に会話を続けてください（問題を閉じると、ほとんどの場合、開発目的でレーダーから外れます）。 このような質問に理想的な場所はStackOverflowです。

私は、グローバルに一意で、通常はコンポーネント名でスコープされるBEM風のクラス名を使用することをお勧めします。

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

次に、CSSで、単一のクラス名を優先して、子孫セレクターの使用を避けてください。 これにより、スタイルの分離とコンポーネントの分離が促進される傾向があります。これにより、スタイルが崩れることなくコンポーネントを簡単に作成できます。

スーツは、優れたノーズツーリング（リワーク）と、スタイルが出血しないように自動化された保護手段を提供する適合バリデーターを備えているため、もう1つの優れたオプションです。

これは興味深い解決策のように見えます： https ：

別の潜在的な解決策はhttp://projects.formidablelabs.com/radium/です

可能な場合はインラインスタイルを好みます。複雑になりすぎる場合は、@ spicyjで推奨されているBEMなどを使用します。 私の経験ではReactとよく合うSuitCSSも好きです。