如何使用 MUI 以编程方式显示“涟漪效应”？

Question

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

我是否需要禁用 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使用的用途。TouchRipple这是定义的片段ButtonBase：

function ButtonBase(props) {
  // ...

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

没有 API 可以手动触发纹波。它在按钮内部进行处理，因此为了做到这一点，您需要创建并控制 MUI 提供的您自己的波纹组件：

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

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

现场演示

相关答案

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