diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
index 9b436a30a1c..d3454dd27ea 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
@@ -1,7 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@material-ui/icons/Delete';
-import colorManipulator, { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import inflection from 'inflection';
 import {
     useTranslate,
@@ -31,10 +32,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: colorManipulator.fade(
-                    theme.palette.error.main,
-                    0.12
-                ),
+                backgroundColor: fade(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
index 1c8dec65be2..1fe19d527e0 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@material-ui/icons/Delete';
-import colorManipulator, { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import {
     useDeleteMany,
     useRefresh,
@@ -30,10 +31,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: colorManipulator.fade(
-                    theme.palette.error.main,
-                    0.12
-                ),
+                backgroundColor: fade(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
index fbe24095905..efcd8e63e47 100644
--- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
+++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -7,7 +7,8 @@ import React, {
     SyntheticEvent,
 } from 'react';
 import PropTypes from 'prop-types';
-import colorManipulator, { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import inflection from 'inflection';
@@ -144,10 +145,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: colorManipulator.fade(
-                    theme.palette.error.main,
-                    0.12
-                ),
+                backgroundColor: fade(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
index 1827c8a5ae8..bae58776929 100644
--- a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
+++ b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, FC, ReactElement, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import colorManipulator, { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import {
@@ -107,10 +108,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: colorManipulator.fade(
-                    theme.palette.error.main,
-                    0.12
-                ),
+                backgroundColor: fade(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',
diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js
index e08e3c1658d..d0e1af1b7cc 100644
--- a/packages/ra-ui-materialui/src/layout/Confirm.js
+++ b/packages/ra-ui-materialui/src/layout/Confirm.js
@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
-import colorManipulator from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionCheck from '@material-ui/icons/CheckCircle';
 import AlertError from '@material-ui/icons/ErrorOutline';
 import classnames from 'classnames';
@@ -24,10 +24,7 @@ const useStyles = makeStyles(
         confirmWarning: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: colorManipulator.fade(
-                    theme.palette.error.main,
-                    0.12
-                ),
+                backgroundColor: fade(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',
diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js
index eac3d51a4f8..9195b515554 100644
--- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js
+++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import colorManipulator, { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import { lighten } from '@material-ui/core/styles/colorManipulator';
 import { useTranslate, sanitizeListRestProps } from 'ra-core';
 
 import TopToolbar from '../layout/TopToolbar';
@@ -19,10 +20,7 @@ const useStyles = makeStyles(
             justifyContent: 'space-between',
             backgroundColor:
                 theme.palette.type === 'light'
-                    ? colorManipulator.lighten(
-                          theme.palette.primary.light,
-                          0.85
-                      )
+                    ? lighten(theme.palette.primary.light, 0.85)
                     : theme.palette.primary.dark,
             minHeight: theme.spacing(8),
             height: theme.spacing(8),