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

Question

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

我需要在 div 上应用触摸波纹效果，但我无法使用按钮或

ButtonBase

元素，因为其中还有另一个按钮。

提前感谢您的回复。

Answer 1

是的，您可以使用

TouchRipple

来模拟波纹效果。该组件没有文档记录，但您可以在

ButtonBase

中查看它的使用方式并自行学习使用它。

首先，您需要将引用传递给

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;

Answer 3

这里的最佳答案很好，但我认为它可以做得更好，因为 MUI 提供了一个简化事情的钩子。

您可以通过以下方式实现：

const App = () => {
  const rippleRef = React.useRef(null);
  const { getRippleHandlers } = useTouchRipple({
    disabled: false,
    focusVisible: false,
    rippleRef,
  });

  return (
    <div
      style={{
        position: "relative",
      }}
      {...getRippleHandlers()}
    >
      <TouchRipple ref={rippleRef} center={false} />

      <Typography>Button</Typography>
    </div>
  );
}

我还注意到，如果您不提供

position: relative

，那么涟漪效应将出现在整个屏幕上，而不是您尝试这样做的组件上。