diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
index 8e6a5d42551..f7b149d78e8 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
+++ b/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 = ;
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
index bf215ba0dd7..e8950e0b23a 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
+++ b/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 {
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
index a32df5fe412..6358ba332ab 100644
--- a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
+++ b/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 = ;
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
index cd5fe33dcd9..e612ceb30cf 100644
--- a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
+++ b/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 {
diff --git a/packages/ra-ui-materialui/src/button/SelectAllButton.tsx b/packages/ra-ui-materialui/src/button/SelectAllButton.tsx
index 4e3c73c81fb..b559515313c 100644
--- a/packages/ra-ui-materialui/src/button/SelectAllButton.tsx
+++ b/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 {
diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
index 3e9ab58faa8..4e56111a3ad 100644
--- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
+++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
@@ -10,6 +10,7 @@ import {
styled,
useThemeProps,
lighten,
+ darken,
} from '@mui/material/styles';
import clsx from 'clsx';
import Toolbar from '@mui/material/Toolbar';
@@ -69,7 +70,7 @@ export const BulkActionsToolbar = (inProps: BulkActionsToolbarProps) => {
color: theme =>
(theme.vars || theme).palette.text.primary,
}}
- variant="subtitle1"
+ variant="body1"
>
{translate(label, {
_: label,
@@ -124,7 +125,7 @@ const Root = styled('div', {
? theme.vars.palette.bulkActionsToolbarBackgroundColor
: theme.palette.mode === 'light'
? lighten(theme.palette.primary.light, 0.8)
- : theme.palette.primary.dark,
+ : darken(theme.palette.primary.dark, 0.5),
minHeight: theme.spacing(6),
height: theme.spacing(6),
paddingRight: theme.spacing(2),
@@ -158,14 +159,12 @@ const Root = styled('div', {
[`& .${BulkActionsToolbarClasses.title}`]: {
display: 'flex',
flex: '0 0 auto',
+ alignItems: 'center',
gap: theme.spacing(1),
},
[`& .${BulkActionsToolbarClasses.icon}`]: {
marginLeft: '-0.5em',
- '&:hover': {
- backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
- },
},
}));
diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts
index 1bdf11da728..061a0e3631f 100644
--- a/packages/ra-ui-materialui/src/theme/bwTheme.ts
+++ b/packages/ra-ui-materialui/src/theme/bwTheme.ts
@@ -144,6 +144,37 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
},
MuiIconButton: {
defaultProps: { disableRipple: true },
+ styleOverrides: {
+ root: {
+ textTransform: 'none',
+ boxShadow: 'none',
+ },
+ colorPrimary: {
+ '&:hover': {
+ backgroundColor: GREY,
+ },
+ },
+ colorSuccess: {
+ borderColor: isDarkMode
+ ? alpha(green['500'], 0.7)
+ : alpha(green['800'], 0.5),
+ '&:hover': {
+ borderColor: isDarkMode
+ ? green['500']
+ : green['800'],
+ },
+ },
+ colorError: {
+ borderColor: isDarkMode
+ ? alpha(deepOrange['600'], 0.7)
+ : alpha(red['900'], 0.5),
+ '&:hover': {
+ borderColor: isDarkMode
+ ? deepOrange['600']
+ : red['900'],
+ },
+ },
+ },
},
MuiListItemButton: {
defaultProps: { disableRipple: true },
diff --git a/packages/ra-ui-materialui/src/theme/houseTheme.ts b/packages/ra-ui-materialui/src/theme/houseTheme.ts
index 5ea059db6b2..0d2bb3bb325 100644
--- a/packages/ra-ui-materialui/src/theme/houseTheme.ts
+++ b/packages/ra-ui-materialui/src/theme/houseTheme.ts
@@ -61,7 +61,7 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
},
'&.Mui-selected, &.Mui-selected:hover': {
color: theme.palette.primary.contrastText,
- zIndex: 5,
+ zIndex: 2,
},
'&:hover': {
color: theme.palette.primary.main,
@@ -165,6 +165,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
fullWidth: true,
},
},
+ RaBulkActionsToolbar: {
+ styleOverrides: {
+ toolbar: {
+ zIndex: 10,
+ },
+ },
+ },
});
const alert = {
diff --git a/packages/ra-ui-materialui/src/theme/radiantTheme.ts b/packages/ra-ui-materialui/src/theme/radiantTheme.ts
index e1d6543e08c..84ef9c6a70d 100644
--- a/packages/ra-ui-materialui/src/theme/radiantTheme.ts
+++ b/packages/ra-ui-materialui/src/theme/radiantTheme.ts
@@ -144,6 +144,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => {
fullWidth: true,
},
},
+ RaBulkActionsToolbar: {
+ styleOverrides: {
+ toolbar: {
+ zIndex: 10,
+ },
+ },
+ },
};
};