Fix hover effect

Author: fzaninotto

examples/simple/src/posts/PostShow.tsx

@@ -7,6 +7,7 @@ import {
     DataTable,
     DateField,
     EditButton,
+    InPlaceEditor,
     NumberField,
     ReferenceArrayField,
     ReferenceManyField,
@@ -93,7 +94,20 @@ const PostShow = () => {
                         />
                         <NumberField source="average_note" />
                         <BooleanField source="commentable" />
-                        <TextField source="views" />
+                        <InPlaceEditor
+                            source="views"
+                            sx={{
+                                '& .RaInPlaceEditor-reading div': {
+                                    fontSize: 14,
+                                },
+                                '& .RaInPlaceEditor-saving div': {
+                                    fontSize: 14,
+                                },
+                                '& .RaInPlaceEditor-editing input': {
+                                    fontSize: 14,
+                                },
+                            }}
+                        />
                         <CloneButton />
                     </TabbedShowLayout.Tab>
                     <TabbedShowLayout.Tab

packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.tsx

@@ -17,6 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 
 import { TextInput } from '../TextInput';
 import { TextField } from '../../field';
+import { bgcolor } from '@mui/system';
 
 export type InPlaceEditorAction =
     | { type: 'edit' }
@@ -263,11 +264,11 @@ const InPlaceEditorClasses = {
 const Root = styled('div', {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})({
+})(({ theme }) => ({
     [`& .${InPlaceEditorClasses.reading}`]: {
         cursor: 'pointer',
         '&:hover': {
-            backgroundColor: 'action.hover',
+            backgroundColor: theme.palette.action.hover,
         },
     },
     [`& .${InPlaceEditorClasses.editing}`]: {
@@ -276,4 +277,4 @@ const Root = styled('div', {
         gap: 1,
     },
     [`& .${InPlaceEditorClasses.saving}`]: { opacity: 0.5 },
-});
+}));