在React中样式化

Question

开发了一些React-Native应用程序后，我通常将所有Stylesheet对象放置在所有组件可能需要的单个Theme.js文件中。 我发现这比具有复杂的Stylesheet变量的每个组件确实有用和容易。

在React中，会推荐类似的方法吗？ 还是可以对CSS文件使用常规方法？ 似乎没有确定的“好方法”。

Answer 1

既不可能有正确的答案，也不会有不正确的答案。 基于某些方法的利弊，这是个人喜好问题。

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

CSS模块

一种可能的解决方案可能是使用CSS-Modules 。 通过使用CSS-Modules，您可以享受真正的局部作用域的优点，它非常适合于基于模块的React组件模型。 这样，您可以定义依赖项，并将样式和标记保持在一起。

CSS-Modules的Github-repo列出了一些要点，总结了该技术的可能优点：

模块化和可重用的 CSS！

• 没有更多的冲突。
• 显式依赖项。
• 没有全球范围。

经典CSS

也可以使用通用CSS。 是否使用预处理器。 就像BEM所建议的那样，通过使用命名约定，可以使用命名空间来初始化本地作用域 。 （ .cardmodule__ ）

这看起来是支持迁移现有代码库以做出反应的好方法。 但是在定义依赖项方面有其缺点。

---

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