样式化ReactJs组件选项

时间:2017-02-15 14:02:55

标签: javascript reactjs react-css-modules

我正在为一个大型项目做一些研究,该项目将使用reactJs,所有html元素都将转换为React Components。

众所周知,css在全局变量方面存在很大问题,因此存在很多css冲突的可能性。

有很多不同的选择,包括:

  • 原子设计

  • SMACSS

  • OOCSS

或使用以下库:

  • React Style

  • React Inline

  • jsxstyle

  • React JSS

  • React Inline CSS

  • React Look

  • React Statics样式

所有这些都有一些好处,但同时所有这些都在实验和遗漏之中。

换句话说,它们都没有解决反应组件样式中的所有css问题,或者只是尝试解决不存在的问题。

在尝试了所有这些之后,我认为我应该只链接到常见样式的css文件,并拥有特定于每个组件的css文件,并从组件中定位该css文件。

有没有人在大型项目中有样式反应组件的经验,对此有任何反馈或建议?

我只是无法决定只使用直接css或javascript。

我有什么错过研究吗?

1 个答案:

答案 0 :(得分:1)

在您的解决方案中包含CSS没有任何问题,SASS和LESS非常棒。

然而,我个人喜欢内联样式作为一个简单的JS对象,因为它为您提供了JS的全部功能,因此您可以根据需要进行动态计算,无需预处理css即可计算所需的所有计算,等...

React团队已经对此进行了一段时间的投资(React Native已默认使用此功能),此处为React Native StylesPresentation from a Facebook engineerProposal from the reactjs/react-future repo ,有很好的图书馆,如镭,可以帮助你很多。

JS中的CSS每天都在变得越来越好,所以是的,我建议你做出这样的跳跃。 :)