简介
@kohlmannj/jss 是一款专为 React 应用定制的 CSS-in-JS 库，通过JavaScript对象作为样式，将CSS样式转换为JavaScript对象并动态插入到 HTML 中。与传统的 CSS 不同，@kohlmannj/jss 可以使样式组件化，便于代码的复用和维护，而且不会产生全局污染，并且自带一些高级的 CSS 特性。
安装和引入
通过 npm 安装并引入 @kohlmannj/jss :
npm install @kohlmannj/jss
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------------- - ---- ----------------
----- --------- - -----------------
------- -
----------- -------
-------- ----- ------
------------- --
------ --------
---------------- -------
----------- ---- ---- ------
---------- -
---------------- ------------
--
--
--
-------- ------------- -
----- ------- - -----------
------ ------- ----------------------------------------------------
-
------ ------- ------基本用法
创建样式
createUseStyles 是一个工厂函数，通过它可以创建一个样式集合，我们可以在样式集合中定义多个对象，每个对象包含一种样式规则（Rules）。在这里，我们只定义了一个样式对象，它包含一个按钮的样式规则。
使用样式
在组件中使用样式时，只需要调用 createUseStyles 返回的 API 即可，这个 API 会返回一个 styles 对象，它包含了从样式规则生成的 class 样式名。
const classes = useStyles()
return <button className={classes.button}>{props.children}</button>由于 createUseStyles 是动态生成的 CSS 类名，因此我们不需要关心重复或者全局样式的问题。
高级用法
有很多高级用法，包括伪类、媒体查询、动态计算等，这里我们只举一个例子，假设是一个响应式设计的组件，它可以在移动端和桌面端显示不同的样式：
-- -------------------- ---- -------
----- --------- - -----------------
------- -
----------- -------
-------- ----- ------
------------- --
---------------- -------
----------- ---- ---- ------
---------- -
---------------- ------------
--
------- ----------- -------- -
-------- ---- ------
--
--
--结束语
@kohlmannj/jss 使得样式组件化成为了可能。构建样式化 React 组件，可以让我们的代码更加模块化，易于拓展，各组件之间的样式不会互相影响，也不会对全局样式造成影响。同时也让我们可以通过 JavaScript 动态计算样式，实现更加丰富的交互效果。希望大家可以通过这篇文章更好地学习和掌握 @kohlmannj/jss 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a8581e8991b448d807b