介绍
react-stylable-checkbox 是一个基于 React 的复选框组件库，可以方便地自定义复选框的样式。
安装
使用 npm 进行安装：
npm install react-stylable-checkbox
使用方法
react-stylable-checkbox 提供了一些自定义样式的接口，可以让我们方便地定制复选框的样式。
基本使用
-- -------------------- ---- -------
------ - -------- - ---- --------------------------
-------- ------------ -
----- --------- ----------- - ----------------
------ -
---------
-----------------
----------- -- -----------------------------
-
-------
-----------
--
-自定义样式
react-stylable-checkbox 提供了 classNames 和 style 两个接口供我们进行自定义样式的设置。
classNames
classNames 是一个对象，其中键是一个可选的类名，值是一个 CSS 类名或者一个名称加一个 CSS 类名列表的数组。
-- -------------------- ---- -------
------ - -------- - ---- --------------------------
-------- ------------ -
----- --------- ----------- - ----------------
----- ---------- - -
---------- ------------
------ --------
------ --------
---------- ------------
-------- ---------
--
------ -
---------
-----------------------
-----------------
----------- -- -----------------------------
-
-------------
-----------
--
-上面的例子中，我们设置了 classNames 属性，其中 checked 表示复选框选中时的样式。
style
style 是一个对象，其中键是一个可选的类名，值是一个 CSS 对象。
-- -------------------- ---- -------
------ - -------- - ---- --------------------------
-------- ------------ -
----- --------- ----------- - ----------------
----- ----- - -
---------- -
-------- -------
----------- --------
--
------ -
----------- -----
-
--
------ -
---------
-------------
-----------------
----------- -- -----------------------------
-
-------------
-----------
--
-上面的例子中，我们设置了 style 属性，其中 container 表示复选框容器的样式，label 表示文本的样式。
总结
使用 react-stylable-checkbox 可以方便地定制复选框的样式，通过 classNames 和 style 属性，我们可以对复选框容器、文本、选中状态等进行自定义样式的设置。
示例代码
-- -------------------- ---- -------
------ - -------- - ---- --------------------------
-------- ------------ -
----- --------- ----------- - ----------------
----- ---------- - -
---------- ------------
------ --------
------ --------
---------- ------------
-------- ---------
--
----- ----- - -
---------- -
-------- -------
----------- --------
--
------ -
----------- -----
-
--
------ -
---------
-----------------------
-------------
-----------------
----------- -- -----------------------------
-
-------------
-----------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e297d