禁用 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
If true, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

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

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

谁能帮帮我？

Answer 1

脉冲效应

给你...魔术发生在 style.css 文件中。请参阅分叉的 CodeSandbox 片段 here.

更新

因为您希望代码位于 sx 中，所以我将代码从 style.css 文件移至 App.js 文件并将其放在 sx 中。请参阅 StackBlitz 片段 here。

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

Answer 2

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

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

Disable Ripple effect on MUI Button and add custom

javascript

css

reactjs

material-ui

css-animations

脉冲效应

更新