Disable ripple effect

Closes #5587

Author: fzaninotto

examples/demo/src/layout/themes.ts

@@ -15,6 +15,32 @@ export const darkTheme = {
                 backgroundColor: '#616161e6',
             },
         },
+        MuiButtonBase: {
+            root: {
+                '&:hover:active::after': {
+                    // recreate a static ripple color
+                    // use the currentColor to make it work both for outlined and contained buttons
+                    // but to dim the background without dimming the text,
+                    // put another element on top with a limited opacity
+                    content: '""',
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    backgroundColor: 'currentColor',
+                    opacity: 0.3,
+                    borderRadius: 'inherit',
+                },
+            },
+        },
+    },
+    props: {
+        MuiButtonBase: {
+            // disable ripple for perf reasons
+            disableRipple: true,
+        },
     },
 };
 
@@ -62,6 +88,26 @@ export const lightTheme = {
                 boxShadow: 'none',
             },
         },
+        MuiButtonBase: {
+            root: {
+                '&:hover:active::after': {
+                    // recreate a static ripple color
+                    // use the currentColor to make it work both for outlined and contained buttons
+                    // but to dim the background without dimming the text,
+                    // put another element on top with a limited opacity
+                    content: '""',
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    backgroundColor: 'currentColor',
+                    opacity: 0.3,
+                    borderRadius: 'inherit',
+                },
+            },
+        },
         MuiAppBar: {
             colorSecondary: {
                 color: '#808080',
@@ -85,4 +131,10 @@ export const lightTheme = {
             },
         },
     },
+    props: {
+        MuiButtonBase: {
+            // disable ripple for perf reasons
+            disableRipple: true,
+        },
+    },
 };

packages/ra-ui-materialui/src/defaultTheme.ts

@@ -28,6 +28,32 @@ export default {
                 },
             },
         },
+        MuiButtonBase: {
+            root: {
+                '&:hover:active::after': {
+                    // recreate a static ripple color
+                    // use the currentColor to make it work both for outlined and contained buttons
+                    // but to dim the background without dimming the text,
+                    // put another element on top with a limited opacity
+                    content: '""',
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    backgroundColor: 'currentColor',
+                    opacity: 0.3,
+                    borderRadius: 'inherit',
+                },
+            },
+        },
+    },
+    props: {
+        MuiButtonBase: {
+            // disable ripple for perf reasons
+            disableRipple: true,
+        },
     },
 };