禁用 MUI 按钮上的波纹效果并添加自定义

Question

我想移除按钮上的波纹效果并在 MUI 按钮中实现我的自定义效果。我已经使用 disableRipple 移除了波纹。我尝试在用户单击元素时应用阴影，但不知何故它不起作用。

import * as React from "react";
import Button from "@mui/material/Button";
import { alpha } from "@mui/material/styles";

export default function DefaultProps() {
  return (
    <Button
      variant="outlined"
      // className='Mui-focusVisible'
      disableRipple
      sx={{
        "&:hover": {
          boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`
        },
        "&.Mui-focusVisible": {
          boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`
        },
        "&.Mui-active": {
          boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`
        }
      }}
    >
      Change default props
    </Button>
  );
}

我已经使用 Mui-focusVisible 在点击时应用阴影，这里提到的是doc

disableRipple bool false
如果为 true，则禁用波纹效果。 ⚠️ 没有涟漪，默认情况下 :focus-visible 没有样式。请务必通过 .Mui-focusVisible 类应用单独的样式来突出显示元素。

我的主要目的是实现和 Ant Design 一样的点击效果。在此处查看按钮：https://ant.design/components/button/

沙盒：https://codesandbox.io/s/defaultprops-material-demo-forked-rhggn?file=/demo.js

谁能帮帮我？

Answer 1

解决办法

给你...它被称为脉冲效应。我添加了魔法发生的style.css 文件。请参阅分叉的 CodeSandbox sn-p here。

更新

我在sx 中应用了相同的代码。请参阅 StackBlitz sn-p here。