前言
在 React 开发中，为了更好的组件化和样式化，我们经常会用到 CSS-in-JS 的方式来书写样式，以便更好的管理和维护，同时也避免了 CSS 命名冲突等问题。而本文所介绍的 npm 包 react-sx，正是一种非常好用的 CSS-in-JS 方式。
安装
使用 npm 安装 react-sx：
npm install react-sx
react-sx 是一种 CSS-in-JS 方式的书写，因此需要使用到 styled-theming 和 emotion 这两个 npm 包：
npm install styled-theming emotion
使用
下面以 Button 组件为例，介绍如何使用 react-sx。
首先，在组件中引入 react-sx，并编写样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -- ---- -----------
------ ------ ---- ------------------
------ - ------------- - ---- ------------------
------ ----- ---- ----------
----- ---------- - --------------
----------------- ------------------------
------ ---------------------
-------- ---------------- -----------------
------- -----
-------------- -----------------
---------- ---------------------
------------ --------------------------
----------- --- ---- ------------
------- -
----------------- ----------------------------
-
--
----- ------ - -- --------- -------- -- -- -
-------------- --------------
----------- ----------------------------------
----------------
--
------ ------- -------其中，sx() 函数用于获取 theme 中对应的值，theme 的定义如下：
-- -------------------- ---- -------
----- ----- - -
------- -
-------- ----------
------------ ----------
----- -------
-------- ----------
-------- ----------
------ ---------
--
------ --- -- -- --- --- ----
---------- ---- --- --- --- --- ----
------------ -
-------- ----
----- ---
--
------ --- -- -- --- --- ---
--
------ ------- ------在组件中，我们使用 sx('colors.primary') 来获取到 theme 中 colors.primary 的值，使用方式很简单。
高级用法
react-sx 还支持类似于 CSS 中的媒体查询，这样能够在不同的设备上优化不同的样式。
例如，我们在 theme 中增加媒体查询规则:
const theme = {
// ...
mediaQueries: {
mobile: '@media (max-width: 768px)',
desktop: '@media (min-width: 768px)'
}
};接着，在 Button 组件中使用：
-- -------------------- ---- -------
----- ---------- - --------------
----------------- ------------------------
-------- ---------------- -----------------
------- -----
-------------- -----------------
---------- ---------------------
------------ --------------------------
----------- --- ---- ------------
---------------------------- -
---------- ---------------------
-
------- -
----------------- ----------------------------
-
--这里，我们使用了 sx('mediaQueries.mobile') 来获取到 mediaQueries.mobile 的值，并使用它来设置字体大小。
结语
react-sx 是一种优秀的思路，它帮助我们更好的组织样式代码，避免了样式冲突等问题。同时，它的扩展性也非常好，能够很好的适应不同的开发需求。因此，在实际 React 开发中，我们可以考虑使用 react-sx 作为我们的 CSS-in-JS 方式，以更好的编写和管理样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8381e8991b448d914d