摘要：解析时，样式组件将生成唯一的类名，并将注入。在星，由创建，被定义为组件样式的工具链。它具有可预测的组合，以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决，占地面积小小于，以及出色的性能。
一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。
您还可以阅读这个推荐的讨论 ，以帮助您做出正确的决定，这是一个非常酷的项目比较。让我们深入了解一下吧。
1. Styled components在Australian Whisky bar 的一个想法变成了一个18K星的项目，在社区中被广泛采用。样式组件使得在React组件中使用CSS变得更加容易，方法是使用封装样式定义样式化组件，而不使用CSS类作为中介层。
通过使用ES6模板文字表示法定义组件来创建样式组件。可以根据需要将CSS属性添加到组件中，就像通常使用CSS一样。解析JS时，样式组件将生成唯一的类名，并将CSS注入DOM。您可以在Max Stoiber的精彩演讲中了解更多信息。
提示：Styled-components也可以与Bit组合，在应用程序之间共享它们并在可视化的游乐场中进行开发。看一看。
styled-components/styled-components _styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps…_github.com[](https://github.com/styled-com...
另请参阅：Wix-Eng的Stylable仍处于开发阶段。
2. Radium在6.5K星，由FormidableLabs创建，Radium被定义为“React组件样式的工具链”。它是使用React而不使用CSS来管理内联样式的工具集。 Radium提供标准接口和抽象，用于处理内联样式无法轻松容纳的CSS功能。
Radium允许您将样式与React组件捆绑在一起，将javascript，html和样式结合在一起。它还提供基于道具的渲染，允许您根据应用的状态设置组件样式。
FormidableLabs/radium _radium - A toolchain for React component styling._github.com[](https://github.com/Formidable...
3. AphroditeAphrodite是一个与框架无关的CSS-in-JS库，支持服务器端渲染，浏览器前缀和最小的CSS生成。 Aphrodite将所有内容转换为类并使用class属性。
在4Kstars，这个项目有或没有React工作，都一并提供诸如注入风格的Dom，自动前缀样式等功能。
Khan/aphrodite _aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS…_github.com[](https://github.com/Khan/aphro...
4. Emotion在4.2K星级，Emotion是一个高性能且灵活的CSS-in-JS库，允许您使用字符串或对象样式设置应用程序样式。它具有可预测的组合，以避免CSS的特殊性问题。基于glam 库及其理念，我们的想法是通过使用babel和PostCSS解析样式来编写CSS时保持运行时性能。核心运行时为2.3kb，React支持为4kb。
emotion-js/emotion _emotion - style as a function of state_github.com[](https://github.com/emotion-js...
5. Glamorous注意：虽然该项目不再积极维护！但它还是很酷:)
在3.6K星级，PayPal的Glamorous面向构建“可恢复的CSS with React”，其灵感来自样式组件和jsxtyle。 Kent C. Dodds 将该项目定义为“ React组件样式通过优雅（灵感）API解决，占地面积小（小于5kb gzipped），以及出色的性能”。它具有与样式组件非常相似的API，并使用类似的工具。
paypal/glamorous _glamorous -
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116928.html
摘要：解析时，样式组件将生成唯一的类名，并将注入。在星，由创建，被定义为组件样式的工具链。它具有可预测的组合，以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决，占地面积小小于，以及出色的性能。 一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。 您还可以阅读这个推荐的讨...
摘要：解析时，样式组件将生成唯一的类名，并将注入。在星，由创建，被定义为组件样式的工具链。它具有可预测的组合，以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决，占地面积小小于，以及出色的性能。 一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。 您还可以阅读这个推荐的讨...
摘要：构建是为了在中为常见任务提供实用程序功能。所有功能都自动进行，并且相应地安排传递的参数以便于使用。在星级，是一个用于处理本机对象的实用程序库。该库没有外部依赖关系，这是一个将事件作为序列进行测试的现场演示。 由于Javascript在2018年仍然是最受欢迎和最广泛使用的编程语言，因此围绕它扩展了生态系统。 showImg(https://segmentfault.com/img/re...
摘要：构建是为了在中为常见任务提供实用程序功能。所有功能都自动进行，并且相应地安排传递的参数以便于使用。在星级，是一个用于处理本机对象的实用程序库。该库没有外部依赖关系，这是一个将事件作为序列进行测试的现场演示。 由于Javascript在2018年仍然是最受欢迎和最广泛使用的编程语言，因此围绕它扩展了生态系统。 showImg(https://segmentfault.com/img/re...
摘要：在我们深入研究这项新鲜的技术之前，让我们先快速的复习原理的相关知识。同时，希望本文能对大家有所帮助。工欲善其事，必先利其器。 flex.css快速入门，极速布局 什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它，但是我想我们都会有一个共同的经历，面对它的各种版本，各种坑，傻傻的分不清楚，flex.css就是对flex布局的一种封装，通过简洁...
阅读 2206·2021-11-24 10:29
阅读 2486·2021-09-24 09:48
阅读 5403·2021-09-22 15:56
阅读 2997·2021-09-06 15:00
阅读 2479·2019-08-30 15:54
阅读 619·2019-08-30 13:48
阅读 2585·2019-08-30 11:17
阅读 3309·2019-08-29 11:20
