我知道你可以在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文件中指定的样式吗?
或者我应该完全避免内联样式?
这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。
这取决于你的应用程序有多大,如果你想使用webpack这样的捆绑器,在构建中将CSS和JS捆绑在一起,以及你想如何管理你的应用程序流!最后,取决于你的情况,你可以做出决定!
在大型项目中,我对组织文件的偏好是将CSS和JS文件分开,这可能更容易共享,更容易让UI人员浏览CSS文件,也更整洁地组织整个应用程序的文件!
始终以这种方式思考,确保在开发阶段所有东西都在它们应该在的地方,正确命名,并且易于其他开发人员找到……
我个人会根据自己的需要来混合它们,比如……
尝试使用外部css,但如果需要React也会接受style,你需要将它作为一个带有key value的对象传递,如下所示:
import React from 'react';
const App = props => {
return (
<div className="app" style={{background: 'red', color: 'white'}}> /*<<<<look at style here*/
Hello World...
</div>
)
}
export default App;
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.