我知道您可以在 React 类中指定样式，如下所示：
const MyDiv = React.createClass({
render: function() {
const style = {
color: 'white',
fontSize: 200
};
return <div style={style}> Have a good and productive day! </div>;
}
});
我应该以这种方式进行所有样式设置，并且在我的 CSS 文件中完全没有指定样式吗？
或者我应该完全避免内联样式？
两者都做一点似乎很奇怪和混乱 - 在调整样式时需要检查两个地方。
还没有很多“最佳实践”。我们这些使用内联样式的人，对于 React 组件，仍然在进行大量的试验。
有许多方法千差万别：React inline-style lib compare 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 的语法。
通常你会在module之外看到一个样式对象。对于待办事项列表组件，它可能如下所示：
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
React 中的 style 属性期望值是一个对象，即键值对。
style = {}里面会有另一个对象{float:'right'}让它工作。
<span style={{float:'right'}}>Download Audit</span>
希望这能解决问题
我在 React 组件中广泛使用内联样式。我发现在组件内并置样式非常清晰，因为它总是很清楚组件具有和不具有哪些样式。此外，手头拥有 Javascript 的全部功能确实可以简化更复杂的样式需求。
起初我并不相信，但在涉足几个月后，我完全转换并且正在将我所有的 CSS 转换为内联或其他 JS 驱动的 css 方法。
此演示文稿被Facebook员工和应对贡献者“vjeux”是真正有用的，以及- https://speakerdeck.com/vjeux/react-css-in-js
style 属性的主要目的是用于动态的、基于状态的样式。例如，您可以根据某种状态在进度条上设置宽度样式，或者根据其他内容设置位置或可见性。
JS 中的样式强加了应用程序无法为可重用组件提供自定义样式的限制。这在上述情况下是完全可以接受的，但当您更改可见特征（尤其是颜色）时则不然。
James K Nelson 在他的信件“为什么你不应该使用 JavaScript 设计 React 组件的样式”中指出，实际上没有必要使用内联样式及其缺点。他的说法是使用 less/scss 的陈旧乏味的 CSS 是最好的解决方案。他的论文中赞成 CSS 的部分：