什么是 jss-preset-default
jss-preset-default 是一个适合于 React 的 JavaScript 样式库，对于处理 css-in-js 有着很高的效率，能够快速从 JavaScript 中生成 CSS 规则，可以运行在浏览器端和服务器端。
jss-preset-default 提供了一个默认的配置文件，包含了常用的插件集合，可以方便快速的使用，避免选择各种插件时出现冲突等问题。
使用步骤
安装 jss-preset-default
使用 npm 安装 jss-preset-default：
npm install --save jss-preset-default
在 React 中使用 jss-preset-default
在 React 中使用 jss-preset-default 需要先创建一个 jss 实例，然后在实例中使用 preset。
import { create } from 'jss';
import preset from 'jss-preset-default';
const jss = create(preset());
jss.setup();上面的代码中，我们首先导入了 jss 的 create 方法和 jss-preset-default 的 preset。
然后我们创建了一个 jss 实例，并使用 preset ，这里的 () 表示使用默认的配置。
最后我们调用了 jss.setup() 来启动 jss。
创建样式
jss 提供了一个 createStyleSheet 方法来创建样式，该方法接收一个样式对象。
-- -------------------- ---- -------
----- ------ - -
----- -
----------- --------
------ -------
------- --
-------- --
----------- ----------- ------ ------ ------------
--------- ---
----------- ----
---------- -------
-
--
----- ----- - -----------------------------
---------------上面的代码中，我们首先定义了一个样式对象 styles，该对象包含了根元素的一些基本样式。
然后我们使用 jss 提供的 createStyleSheet 方法来创建样式表，并传入了样式对象。
最后我们调用了 sheet.attach() 来附加样式表。
使用样式
样式创建完成后，我们可以使用样式表中的类名来应用样式。
<div className={sheet.classes.root}>
Hello, world!
</div>上面的代码中，我们首先通过 sheet.classes.root 获取样式表中的 root 类名。
然后我们使用这个类名来给 React 组件设置样式，这里使用了 jsx 的语法。
示例代码
下面提供一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------
------ ------ ---- ---------------------
----- ------ - -
----- -
----------- --------
------ -------
------- --
-------- --
----------- ----------- ------ ------ ------------
--------- ---
----------- ----
---------- -------
-
--
----- --- - -----------------
------------
----- ----- - -----------------------------
---------------
-------- ----- -
------ -
---- -------------------------------
------ ------
------
--
-
------ ------- ----总结
jss-preset-default 是一个方便快捷的 JavaScript 样式库，对于处理 css-in-js 有着很高的效率，能够快速从 JavaScript 中生成 CSS 规则，可以运行在浏览器端和服务器端。通过本篇文章的介绍，相信大家已经了解了如何在 React 中使用 jss-preset-default。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60850