禁用 MUI 按钮上的涟漪效果并添加自定义效果。

Question

我想在 MUI Button 上移除按钮的涟漪效果并实现自定义效果。我已经使用 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 布尔值 false
如果为 true，则禁用水波纹效果。 ⚠️ 如果没有水波纹，则默认情况下没有 :focus-visible 的样式。请确保通过应用 .Mui-focusVisible 类的单独样式来突出显示元素。

我的主要目的是实现与 Ant Design 相同的单击效果。 在此处检查按钮：https://ant.design/components/button/

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

有人可以帮我吗？

- Harshad Vekariya

Answer 1

步骤1：禁用默认涟漪效果

通过添加disableRipple来禁用涟漪效果，如下所示：

<Button disableRipple>Text</Button>

步骤二：添加自定义脉冲效果

神奇的事情发生在 style.css 文件中。请参见派生的CodeSandbox代码片段。

---

编辑

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

App.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>
  );
}

index.js

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

import App from "./App";

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

index.html

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

style.css

// Empty

- Rok Benko

---

这是好的和正确的，但我希望在styleOverrides或Sx内相同？你能做到吗？ - Harshad Vekariya

我更新了我的回答。由于我当前使用的计算机上CodeSandbox无法工作，所以我使用了StackBlitz。只需将代码复制粘贴到您的项目中即可。 - Rok Benko

我认为它也禁用了选项卡的行为。现在，按钮上的选项卡焦点没有任何效果。 - Harshad Vekariya

如何使其具有与“active”相同的效果。 - Harshad Vekariya

Answer 2

其实比那更简单... 只需调用disableRipple={true}即可.

- Carlos Pinto

---

好的，你说得没错，但我的问题不仅仅是那个。谢谢回答。 - Harshad Vekariya

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Sumit Sharma