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

Question

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

\n

import * as React from "react";\nimport Button from "@mui/material/Button";\nimport { alpha } from "@mui/material/styles";\n\nexport default function DefaultProps() {\n  return (\n    <Button\n      variant="outlined"\n      // className=\'Mui-focusVisible\'\n      disableRipple\n      sx={{\n        "&:hover": {\n          boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`\n        },\n        "&.Mui-focusVisible": {\n          boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`\n        },\n        "&.Mui-active": {\n          boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`\n        }\n      }}\n    >\n      Change default props\n    </Button>\n  );\n}\n

\n

我已经使用 Mui-focusVisible 在单击时应用阴影，如此处提到的是文档

\n

\n

disableRipple bool false
\n如果为 true，则禁用波纹效果。\n\xe2\x9a\xa0\xef\xb8\x8f 如果没有波纹，则默认情况下没有 :focus-visible 样式。请务必通过使用 .Mui-focusVisible 类应用单独的样式来突出显示该元素。

\n

\n

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

\n

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

\n

谁能帮我吗？

\n

Answer 1

第 1 步：禁用默认的波纹效果

disableRipple通过添加以下内容来禁用波纹效果：

<Button disableRipple>Text</Button>

第 2 步：添加自定义脉冲效果

魔法发生在style.css文件内部。请参阅分叉的CodeSandbox 片段。

编辑

由于您希望代码位于内部，因此sx我将代码从style.css文件移动到App.js文件并将其放置在sx. 请参阅 StackBlitz 片段。

应用程序.js

import React from 'react';
import Button from '@mui/material/Button';
import './style.css';

export default function App() {
  return (
    <Button
      variant="outlined"
      disableRipple
      sx={{
        borderRadius: '5px',

        '&::after': {
          content: '""',
          display: 'block',
          position: 'absolute',
          left: 0,
          top: 0,
          width: '100%',
          height: '100%',
          opacity: 0,
          transition: 'all 0.5s',
          boxShadow: '0 0 10px 10px rgba(0, 123, 255, 0.5)',
        },

        '&:active::after': {
          boxShadow: '0 0 0 0 rgba(0, 123, 255, 0.5)',
          position: 'absolute',
          borderRadius: '5px',
          left: 0,
          top: 0,
          opacity: 1,
          transition: '0s',
        },
      }}
    >
      Change default props
    </Button>
  );
}

索引.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

索引.html

<div id="root"></div>

样式.css

// Empty

Answer 2

比这简单得多... 只需调用disableRipple={true}就可以了。