用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 对象,用于在测试期间使用 clearStateenable 和 disable 方法控制内部状态和行为。

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


网页名称:用CSS-in-JS来做的事情有哪些-创新互联
文章网址:http://pwwzsj.com/article/cogijg.html