React.js内联样式最佳实践
我知道你可以在React类中指定样式，如下所示：
var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); 我是否应该这样做所有的样式，并没有在我的CSS文件中指定的所有样式？
还是应该完全避免内联样式？
做一点点两个似乎是奇怪和混乱 – 调整样式时需要检查两个地方。
目前还没有很多“最佳实践”。 我们这些正在使用内联样式的React组件，仍然是非常多的实验。
有许多方法可以大不相同： 反应内联样式的比较图表
全部还是全无？
我们所说的“风格”其实包含了很多的概念：
- 布局 – 元素/组件如何看起来与其他人有关系
- 外观 – 元素/组件的特征
- 行为和状态 – 元素/组件在给定状态下的外观
从状态样式开始
React已经在pipe理你的组件的状态，这使得状态和行为的风格很自然地适合于你的组件逻辑的托pipe。
不要使用条件状态类来构build组件，可以考虑直接添加状态样式：
// 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 （下划线/ lodash）来添加对多个状态的支持：
// Supporting multiple-states with inline-styles <li 'todo-list__item' style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
现在我们正在使用Object.assign ，使得我们的组件可以重用不同的样式变得非常简单。 如果我们想要覆盖默认样式，我们可以在调用站点上使用道具来实现，如下所示： <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>
对于布局支持，我经常尝试将组件devise为100% width和height 。
出现
这是“内联式”辩论中最有争议的地方。 最终，它取决于您的devise组件和使用JavaScript的团队的舒适度。
有一件事是肯定的，你需要图书馆的帮助。 浏览器状态（ :hover ， :focus ）和媒体查询在原始React中是痛苦的。
我喜欢Radium，因为这些硬件的语法是为了模拟SASS的。
代码组织
通常你会在模块外面看到一个样式对象。 对于待办事项列表组件，它可能看起来像这样：
var styles = { root: { display: "block" }, item: { color: "black" complete: { textDecoration: "line-through" }, due: { color: "red" } }, }
吸气剂function
将一堆样式逻辑添加到您的模板可能会变得有点混乱（如上所示）。 我喜欢创buildgetter函数来计算样式：
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属性期望值是一个对象，即Key值对。
style = {}里面会有另一个对象{float：'right'}来使它工作。
<span style={{float:'right'}}>{'Download Audit'}</span>
希望这解决了这个问题
我在我的React组件中广泛使用内联样式。 我发现在组件中共同使用样式要清楚得多，因为总是清楚组件的样式和样式。 加上拥有Javascript的全部function，真正简化了更复杂的样式需求。
我一开始并不确定，但是经过几个月的摸索，我完全转换了，正在将所有的CSS转换为内嵌或其他JS驱动的css方法。
Facebook员工和React贡献者“vjeux”的演示文稿也非常有帮助 – https://speakerdeck.com/vjeux/react-css-in-js
style属性的主要用途是基于dynamic，基于状态的样式。 例如，基于某些状态，您可以在进度条上使用宽度样式，也可以使用基于其他内容的位置或可见性。
JS中的样式强加了应用程序无法为可重用组件提供自定义样式的限制。 在上述情况下，这是完全可以接受的，但是当您更改可见特征，尤其是颜色时，则不是这样。
詹姆斯·K·纳尔逊（James K Nelson）在他的“为什么不应该使用JavaScript对元素进行风格化”一书中写道，实际上并不需要使用内联样式。 他的发言是，与旧/无聊的CSS / CSS是最好的解决scheme。 他的赞成CSS的部分：
- 外部可扩展
- 可排除的（内联样式超越了一切）
- devise师友好
我所做的是给我的可重用组件的每一个独特的自定义元素名称，然后创build一个该组件的CSS文件，具体来说，与该组件的所有样式选项（只为该组件）。
var MyDiv = React.createClass({ render: function() { return <custom-component style={style}> Have a good and productive day! </custom-component>; } });
在文件“custom-component.css”中，每个条目都以自定义组件标签开始：
custom-component { display: block; /* have it work as a div */ color: 'white'; fontSize: 200; } custom-component h1 { font-size: 1.4em; }
这意味着你不会放弃分离关注的关键概念。 查看与风格。 如果你分享你的组件，那么其他人可以更容易地将其组织起来，以匹配其网页的其余部分。
您可以使用react-theme来组织您的内联样式，并在构build可重用组件时使其容易定制。
它在material-ui中的作用类似于ThemeManager 。
我通常有与每个React组件关联的scss文件。 但是，我不明白为什么不用逻辑封装组件并查看它。 我的意思是，你有类似的东西与networking组件。
根据您的configuration，内联样式可以为您提供热重载。 每当样式改变时，网页立即重新呈现。 这有助于我更快地开发组件。 话虽如此，我相信你可以为CSS + SCSS设置Hot reload环境。
这实际上取决于你的应用程序有多大，如果你想使用捆绑软件如webpack，并将CSS和JS捆绑在一起，以及如何pipe理你的应用程序stream！ 在一天结束时，取决于你的情况，你可以做出决定！
我最喜欢在大型项目中组织文件，将CSS和JS文件分离开来，分享起来更容易，UI人员更容易通过CSS文件，整个应用程序也更加整洁。
总是这样想，确保在开发阶段一切都应该在哪里，正确命名，并容易为其他开发人员find东西…
内联样式的问题是内容安全策略（CSP）变得越来越普遍，这是不允许的。 因此，我build议完全避免内联样式。
更新：为了进一步解释，CSP是服务器发送的HTTP头，它限制了页面上可以显示的内容。 这只是一个进一步的缓解，可以应用到服务器，以防止攻击者做一些顽皮的事情，如果开发人员编码的网站很差。
大多数这些限制的目的是阻止XSS（跨站点脚本）攻击。 XSS是攻击者想出一种方法在你的页面上包含他自己的javascript的一种方式（例如，如果我让我的用户名bob<SCRIPT>alert("hello")</SCRIPT>然后发表评论，并且你访问页面，它不应该显示警报）。 开发人员应该拒绝让用户向网站添加这样的内容的能力，但是如果他们犯了一个错误，那么CSP如果发现任何script>标签，就会阻止页面加载。
CSP只是为开发者提供了额外的保护，以确保他们是否犯了错误，攻击者不能为访问者造成问题。
因此，所有的都是XSS，但是如果攻击者不能包含<script>标签，但是可以在标签中包含<style>标签或者包含一个style=参数呢？ 然后，他可能会改变网站的外观，以至于你被点击错误的button或其他问题。 这不是一个问题，但仍然是要避免的，CSP为你做这件事。
testingCSP站点的好资源是https://securityheaders.io/
有关CSP的更多信息，请访问： http ： //www.html5rocks.com/en/tutorials/security/content-security-policy/
