在前端开发过程中，我们经常需要使用弹窗来展示一些重要信息或者用户交互操作。styled-react-modal 是一个基于 React 并使用了 styled-components 库的弹窗组件。它提供了灵活的样式控制和可定制的弹窗内容。
安装
首先，我们需要在项目中安装 styled-react-modal：
--- ------- ------------------
基础用法
styled-react-modal 提供了两种基本弹窗类型：Modal 和 ModalProvider。ModalProvider 是一个包裹组件，它可以使我们在应用程序中轻松地使用 Modal。
------ ------ - -------- - ---- --------
------ ----- ---- ---------------------
------ ------------- ---- ---------------------
----- --- - -- -- -
----- -------- ---------- - ----------------
----- ----------- - -- -- -
-------------------
--
------ -
---------------
------- -------------------------- --------------
------
---------------
-------------------------------
-----------------------------
-
--------- -----------
------- --------------------------- --------------
--------
----------------
--
--我们给 Modal 提供了必要的 props，比如 isOpen、onBackgroundClick 和 onEscapeKeydown。我们还可以在 Modal 组件中添加任何需要的内容。
样式控制
styled-react-modal 和 styled-components 很好地集成在一起，让我们可以轻松地定制弹窗的样式。
------ ------ ---- --------------------
------ ----- ---- ---------------------
------ ----- ----------- - -------------
----------------- ------
-------------- ----
-------- -----
--
----- --- - -- -- -
----- -------- ---------- - ----------------
----- ----------- - -- -- -
-------------------
--
------ -
---------------
------- -------------------------- --------------
------------
---------------
-------------------------------
-----------------------------
-
--------- -----------
------- --------------------------- --------------
--------------
----------------
--
--我们使用 styled-components 的样式传递给 styled-react-modal，而不是在组件中编写内联样式。这样，我们可以使用 styled-components 的所有功能来创建我们的弹窗样式。
完善的示例
下面是一个完整的示例代码，其中使用了 styled-react-modal 和 styled-components 来创建一个自定义的登录弹窗。
------ ------ - -------- - ---- --------
------ ------ ---- --------------------
------ ----- ---- ---------------------
------ ------------- ---- ---------------------
----- ----------- - -------------
----------------- ------
-------------- ----
-------- -----
--
----- ---------- - ----------
---------- -----
------------ ----
-------------- -----
--
----- ---------- - -------------
------ -----
-------- -----
---------- -----
-------------- -----
------- -----
-------------- ----
----------- - - --- ------- -- -- -----
--
----- ----------- - --------------
------ -----
-------- -----
---------- -----
------------ ----
----------------- --------
------ ------
------- -----
-------------- ----
------- --------
------- -
----------------- --------
-
--
----- --- - -- -- -
----- -------- ---------- - ----------------
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------- - -- -- -
-------------------
--
----- -------------------- - ------- -- -
--------------------------------
--
----- -------------------- - ------- -- -
--------------------------------
--
----- ----------- - -- -- -
---------------------- ------------ --------- --------------
-----------------
--
------ -
---------------
------- ------------------------------------
------------
---------------
-------------------------------
-----------------------------
-
------------------------------
-----------
-----------
------------------ -- ---------
----------------
-------------------------------
--
-----------
---------------
----------------------
----------------
-------------------------------
--
------------ -----------------------------------------
--------------
----------------
--
--在这个示例中，我们使用了 styled-components 创建了 ModalTitle、ModalInput 和 ModalButton 组件，并将它们传递给 Modal 组件。我们还使用 useState 来管理登录弹窗的状态和表单输入的数据。
总结
styled-react-modal 提供了一种灵活而简单的方法来创建样式控制的弹窗。使用 styled-components 可以轻松地定制弹窗样式，并将其集成到 React 应用程序中。在完成本文的代码示例后，你将掌握使用 styled-react-modal 创建自定义弹窗的技能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/161338