简介
react-themable-hoc-aphrodite-interface 是一款基于 React 的 npm 包，其提供一个高阶组件，可以通过其接口实现动态主题的切换。
该 npm 包使用了 aphrodite 这个 CSS in JS 库实现样式管理。React 组件通过包装后接口，可以轻松地实现对一组 CSS 样式的控制，即将组件样式与主题分离开来。
安装
通过 npm 仓库，使用以下命令安装：
npm install react-themable-hoc-aphrodite-interface
使用方法
引入
可以使用 ES6 的方式引入该包：
import themeable from 'react-themable-hoc-aphrodite-interface'
也可以使用 CommonJS 的方式引入：
const themeable = require('react-themable-hoc-aphrodite-interface');第一步：定义主题
主题是一个由多个 CSS 属性组成的 JavaScript 对象。每个属性的名称即为此属性的 CSS 样式名，每个属性的值即为此样式名对应的 CSS 样式值。
const lightTheme = {
backgroundColor: "#FFF",
color: "#000",
fontSize: "14px",
};第二步：使用 themeable 高阶组件
使用 HOC (Higher Order Component) 对目标组件进行包装。
const ThemableButton = themeable(Button);
其中，Button 为需要进行主题控制的组件。
第三步：通过 props 进行主题切换
主题通过属性的方式传递给 themeable 组件。当主题改变时，将会重新渲染组件，并展示对应的主题样式。
-- -------------------- ---- -------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------ -----------
--
-
----------------------- -
--------------- ------ -------- ---
-
-------- -
------ -
-----
-------------- --------------------------------------------- --
--------------- ------------------------ --
------
--
-
-其中 ThemeSwitcher 组件为切换主题的 UI，onChangeTheme 方法为主题切换时的回调函数。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -----------------------------------------
------ ------ ---- -----------
------ ------------- ---- ------------------
----- ---------- - -
---------------- -------
------ -------
--------- -------
--
----- --------- - -
---------------- -------
------ -------
--------- -------
--
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------ -----------
--
-
----------------------- -
--------------- ------ -------- ---
-
-------- -
------ -
-----
-------------- --------------------------------------------- --
--------------- ------------------------ --
------
--
-
-
----- -------------- - ------------------
------ ------- ----总结
本文介绍了一款基于 React 的 npm 包，其提供了一个高阶组件，可以通过其接口实现动态主题的切换。我们学习了 npm 包的安装方法和基本用法，了解了如何使用第三方库 aphrodite 实现样式管理，以及如何将组件样式与主题分离。
这个 npm 包为我们提供了方便的组件样式管理体验，为我们的开发工作带来了很大的便利。同时，本文通过对其使用方法的详细介绍，提供了一些关于 React 开发的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf981e8991b448e6c21