简介
Redux-theme-default 是一个用于 React 的开源 NPM 包，它通过实现 Redux 模式中的 theme state，使得管理主题变得更加容易。
这个包提供了一些默认的主题，可以直接使用。同时，你也可以通过扩展这些默认主题，打造出适合自己项目的主题。
安装
npm install --save redux-theme-default
使用
引入
为了在你的项目中使用 Redux-theme-default，你需要首先引入 applyMiddleware 和 createStore 这两个函数，以及 defaultTheme 这个变量。
import { applyMiddleware, createStore } from 'redux';
import defaultTheme from 'redux-theme-default';设置
一旦你引入了这些函数和变量，你就可以在创建 Redux store 的时候，使用 applyMiddleware 来设置 Redux-theme-default。
const store = createStore(reducer, applyMiddleware(defaultTheme()));
修改主题
如果你想要修改默认主题的某些属性，或者增加自定义主题，你可以使用 defaultTheme 的 theme 属性。
const myTheme = {
...defaultTheme.theme,
primaryColor: 'green',
secondaryColor: 'yellow'
};
const store = createStore(reducer, applyMiddleware(defaultTheme(myTheme)));在组件中使用
Redux-theme-default 会将 theme state 注入到所有组件的 props 中。你可以在自己的组件中，通过 props.theme 来访问当前主题的属性。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ -
---- -------- ---------------- -------------------------------- ---
---- -- -- ---------
------
--
-
-示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- ----------- - ---- --------
------ ------------ ---- ----------------------
----- ------- - -
----------------------
------------- --------
--------------- --------
--
----- ------------ - -
------ -------
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
------ ------------
--
--------
------ ------
-
--
----- ----- - -------------------- ----------------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
---- -------- ---------------- -------------------------------- ---
---- -- -- ---------
------
--
-
-
----- ----- - -- -- -
-----
------------ --
------
--
------ ------- ------总结
Redux-theme-default 是一个帮助我们简化 React 项目中主题管理的强大工具，它提供了默认主题和扩展能力，使我们可以方便地管理主题，同时降低了项目的代码复杂度。希望这篇文档对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cd0