除了传统的CSS，您还可以使用内联样式和CSS-in-JS作为React应用程序的样式选项。对于内联样式，您可以将JavaScript对象传递给样式属性：constmyStyle={fontSize:24,lineHeight:'1.3em',fontWeight:'bold',};HelloWorld!
但是，并不是所有的CSS特性都被支持。另一方面，CSS-in-JS是一种使用JavaScript来设置组件样式的技术。解析此JavaScript时，会生成CSS（通常作为JSS使用插件编写全局样式：conststyles={'@global':{body:{fontFamily:'Arial,Helvetica,sans-serif'}}}在Aphrodite中，可以使用第三方extensions这样做：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：它返回尚未刷新的缓冲样式字符串。下面是如何使用它们的示例：//...beforeEach(()=>{StyleSheetTestUtils.suppressStyleInjection();});afterEach(()=>{StyleSheetTestUtils.clearBufferAndResumeStyleInjection();});test('mytest',()=>{constsheet=StyleSheet.create({background:{backgroundColor:'blue'},});css(sheet.background);//缓冲区将包含类似[".background_k554e1{background-color:blue!important;}"]constbuffer=StyleSheetTestUtils.getBufferedStyles();//...});镭是另一个例子。它有一个TestMode对象，用于在使用clearState、enable和disable方法进行测试期间控制内部状态和行为。在这里您可以找到如何使用它的示例。结论CSS-in-JS是一种使用JavaScript设计应用程序样式的技术，您可以使用实现它的库做一些有趣的事情。在本文中，我向您展示了5件您可能不知道可以使用这些库完成的事情。当然，并不是所有的库都是一样的，有些情况只适用于特定的库。在此页面上，您可以测试和比较许多CSS-in-JS库。另一方面，还有其他库将CSS、JavaScript和类型的概念更进一步。一个这样的库是stylable，一个基于组件的库，带有一个预处理器，可以将stylableCSS转换为最小的跨浏览器vanillaCSS。
