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

本篇内容主要讲解"用CSS-in-JS来做的事情有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"用CSS-in-JS来做的事情有哪些"吧!

除了传统的 CSS，你还可以使用 内联样式 和 CSS-in-JS 作为 React 应用程序的样式选项。

对于内联样式，你可以将 JavaScript对象传递给样式属性：

const myStyle = {  fontSize: 24,  lineHeight: '1.3em',  fontWeight: 'bold',};Hello World!

然而，并非所有 CSS 特性都受支持。

另一方面，CSS-in-JS 是一种使用 JavaScript来设置组件样式的技术。在解析此 JavaScript时，会生成 CSS（通常作为

JSS 使用一个 插件 来编写全局样式：

const styles = {  '@global': {    body: {      fontFamily: 'Arial, Helvetica, sans-serif'    }  }}

在 Aphrodite 中，你可以用 第三方扩展 来做：

import {injectGlobalStyles} from "aphrodite-globals";injectGlobalStyles({    "body": {          fontFamily: 'Arial, Helvetica, sans-serif',    }});

或者通过 aphrodit-jss 来使用 JSS 全局插件。

5.在单元测试中使用样式测试组件

有些库包含用于测试组件样式的工具。

Aphrodite 提供了一个没有文档说明（至少在写这篇文章的时候是这样）的对象 StyleSheetTestUtils ，它仅适用于非生产环境（process.env.NODE_ENV！=='production'），有三个方法：

• suppressStyleInjection：它阻止样式被注入到DOM中，当你想要在没有DOM的情况下测试Aphrodite 组件的输出时非常有用。

• clearBufferAndResumeStyleInjection：它与 suppressStyleInjection 相反，所以它们应该搭配使用。

• getBufferedStyles：它返回尚未刷新的缓冲样式字符串。

以下是如何使用它们的示例：

import { StyleSheetTestUtils, css } from 'aphrodite';//...beforeEach(() => {  StyleSheetTestUtils.suppressStyleInjection();});afterEach(() => {  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();});test('my test', () => {  const sheet = StyleSheet.create({    background: {      backgroundColor: 'blue'    },  });  css(sheet.background);  // buffer will contain something like [ ".background_k554e1{background-color:blue !important;}" ]  const buffer = StyleSheetTestUtils.getBufferedStyles();  // ...});

Radium 是另一个例子。它有一个 TestMode 对象，用于在测试期间使用 clearState，enable 和 disable 方法控制内部状态和行为。

到此，相信大家对"用CSS-in-JS来做的事情有哪些"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！