fix: remove StyledButton and use MUI button instead

Author: adguernier

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

@@ -34,6 +34,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
         redirect = 'list',
         translateOptions = {},
         mutationOptions,
+        color = 'error',
         ...rest
     } = props;
     const translate = useTranslate();
@@ -57,15 +58,16 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
 
     return (
         <Fragment>
-            <StyledButton
+            <Button
                 onClick={handleDialogOpen}
                 label={label}
                 className={clsx('ra-delete-button', className)}
                 key="button"
+                color={color}
                 {...rest}
             >
                 {icon}
-            </StyledButton>
+            </Button>
             <Confirm
                 isOpen={open}
                 loading={isLoading}
@@ -131,19 +133,3 @@ DeleteWithConfirmButton.propTypes = {
     icon: PropTypes.element,
     translateOptions: PropTypes.object,
 };
-
-const PREFIX = 'RaDeleteWithConfirmButton';
-
-const StyledButton = styled(Button, {
-    name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: theme.palette.error.main,
-    '&:hover': {
-        backgroundColor: alpha(theme.palette.error.main, 0.12),
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));

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

@@ -27,6 +27,7 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
         onClick,
         redirect = 'list',
         mutationOptions,
+        color = 'error',
         ...rest
     } = props;
 
@@ -41,16 +42,17 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
     });
 
     return (
-        <StyledButton
+        <Button
             onClick={handleDelete}
             disabled={isLoading}
             label={label}
             className={clsx('ra-delete-button', className)}
             key="button"
+            color={color}
             {...rest}
         >
             {icon}
-        </StyledButton>
+        </Button>
     );
 };
 
@@ -84,19 +86,3 @@ DeleteWithUndoButton.propTypes = {
     resource: PropTypes.string,
     icon: PropTypes.element,
 };
-
-const PREFIX = 'RaDeleteWithUndoButton';
-
-const StyledButton = styled(Button, {
-    name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: theme.palette.error.main,
-    '&:hover': {
-        backgroundColor: alpha(theme.palette.error.main, 0.12),
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));