简介
@khard/material-ui-0.18.7-popover-fix 是在 material-ui（React UI 库） 的基础上修复 Popover 组件在弹出时会出现滚动条的bug的包。
安装
在项目目录下执行以下命令安装该包：
npm install @khard/material-ui-0.18.7-popover-fix --save
使用
在需要使用 Popover 组件的文件中，先引入该包：
import PopoverFixed from '@khard/material-ui-0.18.7-popover-fix/Popover';
然后使用 PopoverFixed 替代 Popover 即可，具体使用方法和属性与 Popover 组件相同。举个例子，下面代码实现了在一个按钮上添加一个 Tooltip：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ---------------------------
------ ------- ---- ----------------------------
------ ------------ ---- ------------------------------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- ------
--------- -----
--
-
----------------- - ----- -- -
--------------- ----- ----- --------- ------------------- ---
--
------------------ - -- -- -
--------------- ----- ----- ---
--
-------- -
----- - ----- -------- - - -----------
------ -
-----
--------
-----------
-----------
---------------------------------
-------------------------------
---------------
-
--------------------
----------
-------------
-----------
-------------------
--------------------------
---------------
--------- ---------
----------- ---------
--
------------------
--------- ------
----------- ---------
--
-
------------ -------------
---------------
------
--
-
-深度和学习
Popover 组件在弹出时会出现滚动条的 bug 是由于 Popover 继承了 Modal 组件，而在 Material-UI 中，Modal 组件会在文档的 body 元素上设置一个 overflow: hidden; 属性，导致出现滚动条。
@khard/material-ui-0.18.7-popover-fix 解决这个问题的方式是通过在 Popover 组件中引入一个新的 Resizable 组件，并将 Modal 设置的样式移动到该组件上。这样可以避免 body 元素的样式被改变，同时解决了滚动条的 bug。
通过阅读 @khard/material-ui-0.18.7-popover-fix 的源码和对 Material-UI 组件以及 React 的了解，可以深入理解组件的继承、样式设置、事件响应等知识点。
指导意义
@khard/material-ui-0.18.7-popover-fix 的出现解决了 Popover 组件的一个常见问题，并在 GitHub 上有很多用户给出了正反馈。从中可以看出，当我们遇到问题并且找到解决方案后，可以通过将解决方案开源、贡献给社区，提高了整个社区的技术水平。
对于前端开发者来说，@khard/material-ui-0.18.7-popover-fix 不仅可以解决 Popover 组件的问题，也是一个很好的学习 React 组件编写的例子，可以为我们日后编写自己的组件提供参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672c5