是否可以在 div 上使用 MUI 的触摸波纹效果？

Question

我已经阅读了类似问题的不同答案，但它们都是旧的，并且在最新版本的 MUI 中似乎不起作用。

我需要在 div 上应用触摸波纹效果，但我不能使用按钮或 ButtonBase 元素，因为里面还有另一个按钮。

预先感谢您的回复。

Answer 1

是的，您可以使用 TouchRipple 来模拟涟漪效应。此组件未记录，但您可以在 ButtonBase 中查看它的使用方法并自己学习使用它。

首先，你需要传递一个ref给TouchRipple，当你想启动或停止效果时分别调用ref.current.start(e)或ref.current.stop(e)。

e 是事件对象。当您调用 start(e) 时，它需要鼠标或触摸位置（来自 mousedown 或 touchstart 事件）来知道从哪里开始涟漪效应 (Source)。您可以通过将 center 属性设置为 true 来覆盖此行为，这使得涟漪效果始终从中间开始。

以下是帮助您入门的最低工作示例：

function App() {
  const rippleRef = React.useRef(null);
  const onRippleStart = (e) => {
    rippleRef.current.start(e);
  };
  const onRippleStop = (e) => {
    rippleRef.current.stop(e);
  };

  return (
    <div
      onMouseDown={onRippleStart}
      onMouseUp={onRippleStop}
      style={{
        display: "inline-block",
        padding: 8,
        position: "relative",
        border: "black solid 1px"
      }}
    >
      Button
      <TouchRipple ref={rippleRef} center={false} />
    </div>
  );
}

现场演示

Answer 2

您可以使用 ButtonBase API

使用 ButtonBase API，您可以将 component 属性作为 div 或您想要的任何组件传递

例如

import { ButtonBase, Typography } from "@mui/material";

const App = () => {
  return (
    <ButtonBase component="div">
        <Typography fontSize="1.2rem">Hello, I'm a div with MUI Ripple Effect!</Typography>
    </ButtonBase>
  )
}

export default App;