Remove default styles from bulk actions buttons

Author: djhi

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx

@@ -197,16 +197,7 @@ const PREFIX = 'RaBulkDeleteWithConfirmButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.error.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 const defaultIcon = <ActionDelete />;
 

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -98,6 +98,7 @@ export const BulkDeleteWithUndoButton = (
             onClick={handleClick}
             label={label}
             disabled={isPending}
+            color="error"
             {...sanitizeRestProps(rest)}
         >
             {icon}
@@ -131,16 +132,7 @@ const PREFIX = 'RaBulkDeleteWithUndoButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.error.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx

@@ -195,16 +195,7 @@ const PREFIX = 'RaBulkUpdateWithConfirmButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.primary.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 const defaultIcon = <ActionUpdate />;
 

packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx

@@ -141,16 +141,7 @@ const PREFIX = 'RaBulkUpdateWithUndoButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.primary.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

packages/ra-ui-materialui/src/button/SelectAllButton.tsx

@@ -107,15 +107,7 @@ const PREFIX = 'RaSelectAllButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx

@@ -163,9 +163,6 @@ const Root = styled('div', {
 
     [`& .${BulkActionsToolbarClasses.icon}`]: {
         marginLeft: '-0.5em',
-        '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        },
     },
 }));