为什么 Material-UI 中的 "ripple effect" 在 Popup（Leaflet 地图内）中使用时不可见？

Question

我正在尝试将 Material-UI 按钮放入弹出窗口（Leaflet 库）。当我在 Popup 之外执行此操作时 => 一切正常，每次单击按钮都会触发 涟漪效应 。当我试图将相同的代码放入标记弹出窗口时，某些东西破坏（覆盖）了波纹样式并且它不再可见。

是否可以通过某种方式解决此问题？这是我的代码框：https://codesandbox.io/s/react-leaflet-ripple-ivsxy

我这里有两个按钮：

(1) 在弹出窗口之外 - 工作正常

(2) 在弹出窗口中（点击标记后弹出窗口可见）- 按钮可见但波纹效果被破坏

Answer 1

关于原因，在 Material-UI 波纹处理程序中触发了 mousedown 事件（来自 ButtonBase.js）：

const handleMouseDown = useRippleHandler('start', onMouseDown);

但是在 leaflet mousedown 中，弹出窗口中的事件不会传播到 leaflet 中的地图 之外，这是设计使然（参考 this thread 了解一些细节），这就是为什么缺少涟漪效应的原因。

要避免此行为，一种选择是恢复 mousedown 事件传播，如以下 Popup 自定义组件所示：

class MyPopup extends Component {
  componentDidMount() {
    const { map } = this.props.leaflet;

    map.on("popupopen", e => {
      L.DomEvent.off(
        this.getWrapper(),
        "mousedown",
        L.DomEvent.stopPropagation
      );
    });
    map.on("popupclose", e => {
      L.DomEvent.on(this.getWrapper(), "mousedown", L.DomEvent.stopPropagation);
    });
  }

  getWrapper() {
    return document.querySelector(".leaflet-popup-content-wrapper");
  }

  render() {
    return <Popup {...this.props} />;
  }
}

这是一个updated CodeSandbox

为什么 Material-UI 中的 "ripple effect" 在 Popup（Leaflet 地图内）中使用时不可见？

Why is "ripple effect" from Material-UI not visible when used in Popup (inside Leaflet map)?

leaflet

reactjs

material-ui

react-leaflet