目前还没有很多“最佳实践”。我们这些对 React 组件使用内联样式的人仍在进行大量试验。

有许多方法千差万别：React inline-style lib comparison
chart

全部还是全部？

我们所说的“风格”，其实包括不少概念：

• 布局—— 一个元素/组件与其他组件的关系如何
• 外观 ——元素/组件的特征
• 行为和状态—— 元素/组件在给定状态下的外观

从状态样式开始

React 已经在管理你的组件的状态，这使得 状态和行为 的样式自然适合与你的组件逻辑并置。

与其构建组件以使用条件状态类进行渲染，不如考虑直接添加状态样式：

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

请注意，我们使用一个类来设置 外观 样式，但不再使用任何.is-前缀类来表示 state 和 behavior 。

我们可以使用Object.assign(ES6) 或_.extend(underscore/lodash) 添加对多种状态的支持：

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

定制和可重用性

现在我们正在使用Object.assign它，让我们的组件可以以不同的样式重用变得非常简单。如果我们想覆盖默认样式，我们可以在调用站点使用 props
这样做，如下所示<TodoItem dueStyle={ fontWeight: "bold" } />：像这样实现：

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

布局

就个人而言，我认为内联布局样式没有令人信服的理由。有许多很棒的 CSS 布局系统。我只用一个。

也就是说，不要将布局样式直接添加到您的组件中。用布局组件包装你的组件。这是一个例子。

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

对于布局支持，我经常尝试将组件设计为100% width和height.

外貌

这是“内联式”辩论中最具争议的领域。最终，这取决于您设计的组件以及您的团队使用 JavaScript 的舒适度。

有一件事是肯定的，你需要图书馆的帮助。浏览器状态 ( :hover, :focus) 和媒体查询在原始 React 中很痛苦。

我喜欢Radium，因为这些困难部分的语法旨在模拟 SASS。

代码组织

通常你会在模块之外看到一个样式对象。对于 todo-list 组件，它可能看起来像这样：

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

吸气剂函数

向您的模板添加一堆样式逻辑可能会有点混乱（如上所示）。我喜欢创建 getter 函数来计算样式：

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

进一步关注

我在今年早些时候的 React Europe 上更详细地讨论了所有这些：内联样式以及何时最好“只使用
CSS”。

我很乐意在您一路上发现新发现时为您提供帮助 :) 打我 -> @chantastic