样式化 ReactJs 组件选项答案

【问题标题】：Styling ReactJs Component Options [closed]样式化 ReactJs 组件选项
【发布时间】：2017-07-04 05:44:38
【问题描述】：

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

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

对此有很多不同的选择，包括：

或使用以下库：

所有这些都有一些好处，但同时都在试验中并且缺少一些东西。

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

在尝试了所有这些之后，我有一半的想法是我应该只链接到常见样式的 css 文件，并有一个特定于每个组件的 css 文件，并从组件内定位该 css 文件。

这里有没有人有过在大型项目中设计 React 组件的经验，并且有任何反馈或建议？

我根本无法决定只使用直接的 css 或 javascript。

我有什么遗漏的研究吗？

【问题讨论】：

我喜欢将镭与普通的旧引导程序一起使用。让 css 框架为您处理布局，但是能够真正使用 OOP 编写样式，而无需单独的 css 构建。与PropTypes 配合使用效果很好，即按钮组件应该有一些与之关联的错误颜色。

【解决方案1】：

在您的解决方案中包含 CSS 并没有错，SASS 和 LESS 很棒。

但是，我个人喜欢将内联样式 a 作为一个普通的 JS 对象，因为它为您提供了 JS 的全部功能，因此您可以随心所欲地进行动态计算，无需预处理 css 即可进行所有需要的计算，等等……

React 团队已经在这方面投入了一段时间（React Native 已经默认使用它）这里是 React Native Styles、Presentation from a Facebook engineer 和 Proposal from the reactjs/react-future repo，还有像 Radium 这样的不错的库对你有很大帮助。

JS 中的 CSS 肯定每天都在变得更好，所以是的，我建议你做出这样的跳跃。 :)

【讨论】：