React中的样式

时间:2015-12-16 21:10:39

标签: javascript css reactjs

开发了一些React-Native应用程序之后,我通常将所有Stylesheet个对象放在一个Theme.js文件中,所有组件都需要这些文件。我发现这比具有复杂样式表变量的每个组件更有帮助和更容易。

在React中,会推荐类似的方法吗?或者我能够使用CSS文件的传统方法吗?似乎并不是一个明确的“好”的。这样做的方式。

1 个答案:

答案 0 :(得分:1)

既没有正确也没有错误的答案。基于某些方法的优缺点,这是个人喜好的问题。

以下是“复杂样式表变量”旁边的一些方法。

CSS-模块

一种可能的解决方案可能是使用CSS-Modules。通过使用CSS模块,您可以享受真正的本地范围的优点,这非常适合基于模块的反应组件模型。通过这种方式,您可以定义依赖关系并将样式和标记保持在一起。

CSS-Modules的Github-repo列出了一些要点,总结了这种技术的可能优点:

  

模块化可重复使用 CSS!

     
      
  • 不再有冲突。
  •   
  • 显式依赖。
  •   
  • 没有全球范围。
  •   

经典CSS

也可以使用常见的CSS。是否使用预处理器。 通过使用命名约定(如BEM建议),可以模仿本地范围和命名空间。 (.cardmodule__

这似乎是支持迁移现有代码库以做出反应的好方法。但它在定义依赖关系方面有其缺点。

我敢肯定,还有更多的争论。也许有些可以一点一点地添加到列表中。