我知道你可以在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文件中指定的样式吗?
或者我应该完全避免内联样式?
这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。
当前回答
JSX中的样式与HTML中的样式非常相似。
HTML的例子:
Div style="background-color: red;颜色:白色”
JSX案例：
div style={{backgroundColor: '红色'，color: '白色'}}
其他回答
下面是JSX语法中基于布尔的样式:
style={{display: this.state.isShowing ? "inherit" : "none"}}
根据您的配置，内联样式可以为您提供热重载。每次样式改变时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信你可以为CSS + SCSS设置一个热重载环境。
我通常有与每个React组件相关联的scss文件。但是，我不明白为什么你不封装组件与逻辑，并查看它。我的意思是，你有类似的web组件。
James K Nelson在他的信“为什么你不应该用JavaScript样式化React组件”中指出，实际上没有必要使用内联样式及其缺点。他的观点是，旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:
可扩展的外部 可分割(内联样式超越一切) define_image_transformation
目前还没有很多“最佳实践”。对于React组件，我们这些使用内联样式的人还在进行试验。
有许多不同的方法: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)或_。扩展(下划线/lodash)以添加对多个状态的支持:
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
现在我们在使用Object。赋值它变得非常简单，使我们的组件可重复使用不同的风格。如果我们想覆盖默认样式，我们可以在调用站点上使用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%的宽度和高度。
外观
这是“内联风格”辩论中最有争议的地方。最终，这取决于你设计的组件和你的团队对JavaScript的适应程度。
有一件事是肯定的，你需要图书馆的帮助。浏览器状态(:hover，:focus)和媒体查询在原始React中是痛苦的。
我喜欢镭，因为那些硬部分的语法是为SASS建模而设计的。
代码组织
通常你会在模块外部看到一个style对象。对于todo-list组件，它可能看起来像这样:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
getter函数
向模板中添加一堆样式逻辑可能会有点混乱(如上所示)。我喜欢创建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
