1. 简介
react-style-hoc 是一个 React 高阶组件（Higher-Order Component），用于帮助开发者简化组件样式的管理。它可以让开发者通过定义一些样式对象，然后将这些样式对象传递到组件中进行统一的样式控制。使用 react-style-hoc，可以有效地实现样式的复用和组件的逻辑与样式的分离。
2. 安装
使用 npm 进行安装：
npm install react-style-hoc --save
3. 使用
3.1 引入
在需要使用 react-style-hoc 的组件中，首先需要引入该包：
import styleable from 'react-style-hoc';
3.2 样式定义
在组件中需要定义一些样式对象，可以使用 ES6 的对象字面量方式定义，例如：
-- -------------------- ---- -------
----- ------ - -
---------- -
-------- -------
-------------- ---------
--------------- ---------
----------- ---------
-------- -------
------- ---- ----- ------
------------- ------
---------------- ---------
--
------ -
--------- -------
------ ------
--
-------- -
--------- -------
------ -------
----------- ---------
----------- ------
---------- ------
--
------- -
-------- ---- ------
------ -------
---------------- ----------
------- -------
------------- ------
------- ---------
-
--3.3 使用样式
然后，通过调用 styleable 高阶组件，将定义好的样式对象传递到组件中：
const MyComponent = (props) => {
// ...
};
export default styleable(MyComponent, styles);这样，就可以在组件中使用样式了。在组件中使用样式的方式与普通的样式类名类似，只需要将样式对象的属性名作为 className 属性的值即可，例如：
-- -------------------- ---- -------
----- ----------- - ------- -- -
------ -
---- -----------------------------------
--- ------------------------------------------
-- ---------------------------------------------
------- ------------------------------- ----------- -- ------------ ----------
----
---------
------
--
--
------ ------- ---------------------- --------3.4 样式扩展
有时候，我们需要在某些情况下对组件的样式进行扩展，比如添加一些额外的样式属性或覆盖一些原有的样式属性。这时候，可以通过将 props 中的 styles 添加到本地的样式中来实现样式扩展。
-- -------------------- ---- -------
----- ----------- - ------- -- -
----- ----------- - -
---------- -
------------- ------
--
-------- -
------ ------
-
--
------ -
---- --------------------------------- - - - - ---------------------------------- ------------------------------
--- ------------------------------------------
-- ------------------------------- - - - - -------------------------------- ----------------------------
---- ----- --------------------------------------------------------- ----
----
------- -------------------------------------------
------
--
--
------ ------- ---------------------- --------注意，如果需要覆盖原有的样式属性，必须使用该属性原有的名称，不能使用 className，否则将无法覆盖成功。
4. 示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ --------- ---- ------------------
----- ------ - -
---------- -
-------- -------
-------------- ---------
--------------- ---------
----------- ---------
-------- -------
------- ---- ----- ------
------------- ------
---------------- ---------
--
-------------------- -
---------------- ------
--
------ -
--------- -------
------ ------
--
-------- -
--------- -------
------ -------
----------- ---------
----------- ------
---------- ------
--
------------------ -
--------- ------
--
--------------------- -
------ ------
--
------- -
-------- ---- ------
------ -------
---------------- ----------
------- -------
------------- ------
------- ---------
-
--
----- ----------- - ------- -- -
----- ----------- - -
---------- -
------------- ------
--
-------- -
------ ------
-
--
------ -
---- --------------------------------- - - - - ---------------------------------- ------------------------------
--- ------------------------------------------
-- ------------------------------- - - - - -------------------------------- ----------------------------
---- ----- --------------------------------------------------------- ----
----
------- -------------------------------------------
------
--
--
------ ------- ---------------------- --------5. 总结
通过 react-style-hoc，我们可以轻松地实现组件样式的管理和控制，避免样式的重复定义和代码的冗余。另外，样式扩展的功能也让我们在需要覆盖或者扩展原有样式时更加方便和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1c81e8991b448d7bed