React: 如何封装样式？

我认为您已经看过本文档，了解我们如何进行内联样式： http :

我们的样式与浏览器样式相同。 我们还没有像影子DOM那样干净的解决方案来进行样式封装，但是Web已经存在了很多年没有影子DOM，因此使用浏览器的本机样式规则设计网站当然是可能的：)。

您可以做的一件事是定义样式重置类，该类将样式重置为默认样式，然后可以使用更特定的选择器覆盖默认样式。

或者，您可以创建一个具有所有默认样式的基本内联样式对象，将该对象导入所有地方，并且当您要应用特定样式时，可以复制该对象并使用Object.assign覆盖要设置的样式。

那是我的两分钱。 cc @spicyj

PS：因为这更多是使用问题，而不是React中的错误，所以我将继续解决该问题。 欢迎继续在此线程中进行对话（解决问题主要是出于开发目的而已，不在我们的讨论范围之内）。 解决此类问题的理想场所是StackOverflow。

我倾向于建议使用全局唯一的BEM风格的类名，通常以组件名称为范围：

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

然后在CSS中，尽量避免使用后代选择器，而应使用单个类名。 这往往会促进样式的隔离和组件的分离–它使组成组件更容易，而样式不会散乱。

西装是另一种不错的选择，因为它具有出色的鼻工具（返工）和一致性验证器，可以自动保护您的款式不流血。

这看起来是一个有趣的解决方案： https :

另一个可能的解决方案是http://projects.formidablelabs.com/radium/

我倾向于尽可能使用内联样式，然后在过于复杂时使用@spicyj建议的BEM之类的东西。 我也喜欢SuitCSS，根据我的经验，它非常适合React。