'Disable Ripple effect on MUI Button and add custom

I wanted to remove the ripple effect on the button and implement my custom effect in MUI Button. I have removed ripple using disableRipple. I have tried to apply shadow when the user clicks on an element, but somehow it's not working.

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

I have used Mui-focusVisible to apply shadow on click as mentioned here is 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.

My main intention is to achieve a click effect same as Ant Design. Check the button here: https://ant.design/components/button/

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

Can anyone help me out?

javascriptcssreactjsmaterial-uicss-animations


Solution 1:[1]

The pulse effect

Here you go... The magic happens inside the style.css file. See the forked CodeSandbox snippet here.

UPDATE

Since you wanted the code to be inside sx I moved the code from the style.css file to the App.js file and placed it inside sx. See the StackBlitz snippet 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

Solution 2:[2]

It's much simpler than that... Just call disableRipple={true} and you're good to go.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Carlos Pinto

Related Questions