前言
本文将会介绍一款前端开发中的必备NPM包@kohlmannj/aphrodite-jss。形象地说，@kohlmannj/aphrodite-jss可以让你的CSS更加易维护和高效。并且，本篇文章不仅仅是教你使用，更是教你如何在实际应用中使用它。
介绍
@kohlmannj/aphrodite-jss是一个能够将aphrodite CSS工具集与JSS高级CSS样式机制融合的库。在CSS领域，aphrodite是一种CSS-in-JS的解决方案，可以让你在JavaScript代码中写CSS，非常方便。
可以把@kohlmannj/aphrodite-jss简单理解为两部分，深度了解的同学可跳过。
- aphrodite: 在JavaScript中进行CSS编写的解决方案，提供了一个抽象层去将虚拟的DOM节点映射到样式表上。
- JSS: 与Aphrodite不同，JSS是一个实用的JavaScript样式库，它具有方便的类型定义、生成器和双向绑定等优势。
语言有限，如果想更加了解两者详细信息，请参考官方文档。
安装
使用npm进行安装。
$ npm install --save @kohlmannj/aphrodite-jss
使用
和React一起使用
下面我们通过一个简单的React APP来介绍如何使用@kohlmannj/aphrodite-jss。
首先进行样式的定义。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------------
----- ------ - -------------------
---------- -
----- --
---------------- ------
--
----- -
--------- ---
------ ------
-
--然后是React组件的定义。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- ---- - ---- --------------
------ - --------------- - ---- -----------
------ - ---------- - ---- --------------------------
----- ------ - -------------------
---------- -
----- --
---------------- ------
--
----- -
--------- ---
------ ------
-
--
----- --------- - -----------------------
------ ------- -------- ----- -
----- ------- - -----------
------ -
----- --------------------------
----- -------------------------- -------------------------------
-------
-
-以上代码定义了两个样式container和text，分别控制View和Text的样式，并分别设置了backgroundColor和color属性。使用createUseStyles将styles进行实例化，获得一个类似于CSS Modules的对象，并将这个实例对象作为样式属性传递给View和Text组件，达到了控制样式的效果。
搭配webpack使用
在React APP的构建中，会使用Webpack对资源进行打包。@kohlmannj/aphrodite-jss在Webpack中使用，需要安装相关的loaders。
安装依赖。
$ npm install --save-dev @kohlmannj/aphrodite-jss css-loader jss-loader
webpack.config.js的代码如下。
-- -------------------- ---- -------
-------------- - -
-- --- ---------
------- -
------ -
- -- ------ -- --
- -- ------- -- --
-
----- ---------
---- -
- ------- ------------ --
- ------- ------------ -
-
-
-
-
-在代码中，我们添加了一条使用jss-loader去处理.jss文件的规则。这意味着在Webpack进行构建的时候，@kohlmannj/aphrodite-jss定义的样式文件就可以进行打包。
下面是一个简单的例子。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------------
------ ----------- ---- -----------
----- ------ - -------------------
------- -
---------------- --------
------ -------
-
--
-------- -------- ------- -- -
------ -
------- -------------------------------- ------------
-
-
------ ------- ---------------------------该代码定义了一个Button组件，使用injectSheet方法对styles进行实例化，通过props的方式传递给Button组件，以实现给button标签打上样式的效果。
React Native中使用
在React Native编写样式的时候，有时会用到StyleSheet.create方法来实现CSS-in-JS的效果。同样，在React Native中使用@kohlmannj/aphrodite-jss也是一个非常不错的解决方案。下面是一个简单的例子。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------------
------ - --------------- - ---- -----------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- --------
--
----- -
--------- ---
------ ------
-
--
----- --------- - -----------------------
-------- ----- -
----- ------- - -----------
------ -
----- --------------------------
----- -------------------------- -------------------------------
-------
-
-
------ ------- ---通过StyleSheet.create定义的样式和createUseStyles实例化并传递给组件的方式，也可以完成React Native中的样式处理。
总结
在前端开发中，CSS样式表是必不可少的一部分。通过使用@kohlmannj/aphrodite-jss，可以更加直观地展现样式表的结构，并使用JavaScript语言来实现响应式设计等高级功能。本文章介绍了@kohlmannj/aphrodite-jss的使用方法，并提供了多个场景的实战应用，希望可以对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c081e8991b448e315a