我知道你可以在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文件中指定的样式吗?
或者我应该完全避免内联样式?
这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。
当前回答
2020年更新:最好的做法是使用一个已经为你完成了艰苦工作的库，并且在你进行转换时不会杀死你的团队，正如本视频中最初接受的答案所指出的那样(它仍然相关)。为了了解趋势，这是一个非常有用的图表。在做了自己的研究之后，我选择在我的新项目中使用Emotion，它被证明是非常灵活和可扩展的。
鉴于2015年投票最多的答案是推荐镭，现在已经进入维护模式。因此，增加一些备选方案似乎是合理的。停止使用镭的帖子建议使用几个图书馆。每个链接的网站都有现成的示例，所以我将避免在这里复制和粘贴代码。
Emotion which is "inspired by" styled-components among others, uses styles in js and can be framework agnostic, but definitely promotes its React library. Emotion has been kept up to date as of this post. styled-components is comparable and offers many of the same features as Emotion. Also actively being maintained. Both Emotion and styled-components have similar syntax. It is built specifically to work with React components. JSS Yet another option for styles in js which is framework agnostic though it does have a number of framework packages, React-JSS among them.
其他回答
根据您的配置，内联样式可以为您提供热重载。每次样式改变时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信你可以为CSS + SCSS设置一个热重载环境。
我所做的是为每个可重用组件提供一个唯一的自定义元素名称，然后为该组件创建一个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标签开始:
custom-component {
display: block; /* have it work as a div */
color: 'white';
fontSize: 200;
}
custom-component h1 {
font-size: 1.4em;
}
这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。
我通常有与每个React组件相关联的scss文件。但是，我不明白为什么你不封装组件与逻辑，并查看它。我的意思是，你有类似的web组件。
对于某些组件，使用内联样式更容易。此外，我发现它更容易和更简洁(因为我使用Javascript而不是CSS)动画组件样式。
对于独立组件，我使用“扩展操作符”或“…”。对我来说，它清晰、美丽，在狭小的空间里也能工作。下面是我制作的一个加载动画来展示它的好处:
<div style={{...this.styles.container, ...this.state.opacity}}>
<div style={{...this.state.colors[0], ...this.styles.block}}/>
<div style={{...this.state.colors[1], ...this.styles.block}}/>
<div style={{...this.state.colors[2], ...this.styles.block}}/>
<div style={{...this.state.colors[7], ...this.styles.block}}/>
<div style={{...this.styles.block}}/>
<div style={{...this.state.colors[3], ...this.styles.block}}/>
<div style={{...this.state.colors[6], ...this.styles.block}}/>
<div style={{...this.state.colors[5], ...this.styles.block}}/>
<div style={{...this.state.colors[4], ...this.styles.block}}/>
</div>
this.styles = {
container: {
'display': 'flex',
'flexDirection': 'row',
'justifyContent': 'center',
'alignItems': 'center',
'flexWrap': 'wrap',
'width': 21,
'height': 21,
'borderRadius': '50%'
},
block: {
'width': 7,
'height': 7,
'borderRadius': '50%',
}
}
this.state = {
colors: [
{ backgroundColor: 'red'},
{ backgroundColor: 'blue'},
{ backgroundColor: 'yellow'},
{ backgroundColor: 'green'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
{ backgroundColor: 'white'},
],
opacity: {
'opacity': 0
}
}
2019年11月
在这个行业(一家财富500强公司)工作，我不允许做任何内联样式。在我们的团队中，我们认为内联样式是不可读和不可维护的。而且，在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后，我不得不同意这一点。我完全反对内联样式。
2020年更新:最好的做法是使用一个已经为你完成了艰苦工作的库，并且在你进行转换时不会杀死你的团队，正如本视频中最初接受的答案所指出的那样(它仍然相关)。为了了解趋势，这是一个非常有用的图表。在做了自己的研究之后，我选择在我的新项目中使用Emotion，它被证明是非常灵活和可扩展的。
鉴于2015年投票最多的答案是推荐镭，现在已经进入维护模式。因此，增加一些备选方案似乎是合理的。停止使用镭的帖子建议使用几个图书馆。每个链接的网站都有现成的示例，所以我将避免在这里复制和粘贴代码。
Emotion which is "inspired by" styled-components among others, uses styles in js and can be framework agnostic, but definitely promotes its React library. Emotion has been kept up to date as of this post. styled-components is comparable and offers many of the same features as Emotion. Also actively being maintained. Both Emotion and styled-components have similar syntax. It is built specifically to work with React components. JSS Yet another option for styles in js which is framework agnostic though it does have a number of framework packages, React-JSS among them.
