目前还没有很多“最佳实践”。我们中那些使用内联样式作为React组件的人仍在进行大量试验。
全部还是全部？
我们所称的“样式”实际上包括许多概念：
- 布局- 元素/组件与其他对象的关系外观
- 外观- 元素/组件的特征
- 行为和状态- 元素/组件在给定状态下的外观
从状态样式开始
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-前缀的类来表示 状态和行为 。
我们可以使用
Object.assign（ES6）或
_.extend（下划线/破折号）添加对多个状态的支持：
// Supporting multiple-states with inline-styles<li 'todo-list__item' style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>定制和可重用性
现在，我们正在使用
Object.assign它，使我们的组件以不同的样式可重用变得非常简单。如果我们想覆盖默认样式，则可以在调用现场使用props进行覆盖，例如：
<TodoItemdueStyle={ 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 > <UserBadge firstName="Michael" lastName="Chan" /></div>
为了获得布局支持，我经常尝试将组件设计为
100%
widthand
height。
出现
这是“内联式”辩论中最具争议的领域。最终，这取决于您设计的组件以及Javascript团队的舒适度。
可以肯定的是，您需要图书馆的协助。浏览器状态（
:hover，
:focus）和媒体查询在原始React中很痛苦。
我喜欢Radium，因为这些硬部件的语法旨在模拟SASS。
代码组织
通常，您会在模块外部看到样式对象。对于待办事项列表组件，它可能看起来像这样：
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> }});
