如何使用 MUI 以编程方式显示 "ripple effect"？

Question

基本上是标题。我想在 MUI 按钮的 collection 上手动显示涟漪效果 - 当我单击按钮时涟漪效果起作用，但我找不到以编程方式显示涟漪效果的方法。

我是否需要禁用 MUI 的涟漪效应，然后制作我自己的涟漪效应函数，我可以将其附加到 onClick？

{this.buttons.map((button) => (
    <React.Fragment key={button.name}>
        {button.render ? (
                <div className="col-3">
                    <Button
                        autoFocus={true}
                        className="w-100 p-3"
                        variant="contained"
                        color="primary"
                        classes={{root: classes.button}}
                        disableElevation
                        onClick={() => {updateState(button.onClick(text))}}
                    >
                        {button.keyCode}
                    </Button>                               
                </div>
        ) : (<></>)}
    </React.Fragment>
))}

Answer 1

Button 在后台使用 ButtonBase which uses TouchRipple。这是 ButtonBase 定义的片段：

function ButtonBase(props) {
  // ...

  return (
    <ButtonBaseRoot>
      {children}
      <TouchRipple ref={rippleRef} center={centerRipple} {...TouchRippleProps} />
    </ButtonBaseRoot>
  )
}

没有API手动触发涟漪。它是在按钮内部处理的，所以为了做到这一点，您需要创建和控制 MUI 提供的您自己的波纹组件：

import TouchRipple from '@mui/material/ButtonBase/TouchRipple';

const rippleRef = React.useRef(null);
const buttonRef = React.useRef(null);
const triggerRipple = () => {
  const container = buttonRef.current;
  const rect = container.getBoundingClientRect();

  rippleRef.current.start(
    {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
    },
    // when center is true, the ripple doesn't travel to the border of the container
    { center: false },
  );

  setTimeout(() => rippleRef.current.stop({}), 320);
};

return (
  <div>
    <Button onClick={triggerRipple}>start ripple</Button>
    <Box display="flex" justifyContent="center" m={10}>
      <Button
        variant="contained"
        color="primary"
        ref={buttonRef}
        sx={{ display: 'relative' }}
      >
        My little ripple
        <TouchRipple ref={rippleRef} center />
      </Button>
    </Box>
  </div>
);

如何使用 MUI 以编程方式显示 "ripple effect"？

How do I programatically show "ripple effect" with MUI?

reactjs

material-ui

ripple

现场演示

相关回答