Disable ripple effect

Closes #5587
marmelab · Nov 27, 2020 · d86309c · d86309c
1 parent a0940d3
commit d86309c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/examples/demo/src/layout/themes.ts b/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,
+        },
+    },
 };
diff --git a/packages/ra-ui-materialui/src/defaultTheme.ts b/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,
+        },
     },
 };