用CSS-in-JS来做的事情有哪些

本篇内容主要讲解“用CSS-in-JS来做的事情有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用CSS-in-JS来做的事情有哪些”吧!除了传统的 CSS，你还可以使用内联样式和CSS-in-JS作为 React 应用程序的样式选项。对于内联样式，你可以将 JavaScript对象传递给样式属性：然而，并非所有 CSS 特性都受支持。另一方面，CSS-in-JS 是一种使用 JavaScript来设置组件样式的技术。在解析此 JavaScript时，会生成 CSS（通常作为

元素）并附加到 DOM 中。这个功能由第三方库实现。例如，下面是使用Aphrodite实现的上一个示例：其他第三方库推荐：EmotionJSSRadiumStyled-components我并不完全赞成使用 CSS-in-JS，但我不得不说，其中一些库增加了对在某些情况下可能会有用的功能支持。在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。像styled-components和emotion库允许您使用标记模板文字从样式中创建 React 组件：elementwithbluetext
constBlueText=styled.p`
color:blue;
`;
Mybluetext它们也允许你定位于其他样式组件(像你使用 CSS 选择器一样)：
这在组合伪类时很有用，例如，在悬停时更改组件的颜色：
假设你已经使用Aphrodite为你的应用程序设计样式，现在你需要支持主题。但问题是Aphrodite不能轻易地支持主题。 至少不像Emotion那么容易。不过，这里有两个项目将JSS的核心与Aphrodite和styled-components相结合，

aphrodite-jss和styled-jss

。通过这种方式，你可以保留Aphrodite(或styled-components) 的优点，并使用JSS的所有特性和插件

，从规则缓存到规则隔离

，以及

主题

，主题包，以下是它提供的高阶组件：ThemeProvider：通过 context 向 react 树传递主题对象。withTheme：允许你接收一个主题对象并作为属性来更新。例如：在Aphrodite和主题的案例中，作为另一个例子，你也可以使用react-with-styles

，它有实现Aphrodite或JSS接口，这样在定义样式时就可以访问主题信息了。与内联样式不同，CSS-in-JS 允许你使用关键帧定义动画。 例如，这是使用styled-components做的：但是很多人不知道的是，你可以通过在animation属性中使用多个关键帧对象来链接多个动画。 下面是修改后的两个动画的例子：Radium是另一个通过传递关键帧对象数组作为animationName属性值来支持多个动画的库：CSS 中的一切都是全局的，使用 CSS-in-JS 的目的之一是消除全局样式定义。但是，全局样式的使用有时可能是很有效的，例如，当你想对页面中的每个元素应用相同的字体样式时。当然，你总是可以使用传统的 CSS，通过 Webpack 导入或在index.html文件中声明它。但是，如果您真的想在所有样式中使用 JavaScript，那么有些库实际上允许您通过helper组件或扩展/插件来定义全局样式。在Radium中，您可以使用Style组件来渲染具有全局样式的样式元素。 例如：将返回：JSS使用一个插件来编写全局样式：在Aphrodite中，你可以用第三方扩展来做：或者通过aphrodit-jss来使用JSS全局插件。有些库包含用于测试组件样式的工具。Aphrodite提供了一个没有文档说明（至少在写这篇文章的时候是这样）的对象

StyleSheetTestUtils

，它仅适用于非生产环境（process.env.NODE_ENV！=='免费云主机、域名production'），有三个方法：suppressStyleInjection：它阻止样式被注入到DOM中，当你想要在没有DOM的情况下测试Aphrodite组件的输出时非常有用。clearBufferAndResumeStyleInjection：它与suppressStyleInjection相反，所以它们应该搭配使用。getBufferedStyles：它返回尚未刷新的缓冲样式字符串。以下是如何使用它们的示例：Radium是另一个例子。它有一个TestMode对象，用于在测试期间使用clearState，enable和disable方法控制内部状态和行为。到此，相信大家对“用CSS-in-JS来做的事情有哪些”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: JavaScript面向对象三个基本特征是什么

这篇文章主要讲解了“JavaScript面向对象三个基本特征是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript面向对象三个基本特征是什么”吧！在说封装之先了解一下封装到底是什么？什么是封装…