Turn hover off then re-enable in the theme to prevent Mui hover setti…

…ngs overriding theme hover settings
coecms · Dec 18, 2023 · 30836b0 · 30836b0
1 parent 9e4a5fa
commit 30836b0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/src/components/groups/index.tsx b/src/components/groups/index.tsx
@@ -305,18 +305,7 @@ export const GroupList = () => {
       <Datagrid
         rowClick="show"
         bulkActionButtons={false}
-        sx={{
-          "& .MuiTableRow-hover": {
-            "&:hover": {
-              backgroundColor: clex_secondary_colours_dark["purple"],
-              color: "white",
-            },
-          },
-          "& .MuiTableCell-root": {
-            color:"inherit",
-          }
-
-        }}
+        hover={false}
       >
         <TextField source="id" label="Group Name" />
         <FunctionField label="Compute Usage" render={ComputeUsage} />

diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx
@@ -240,17 +240,7 @@ export const UserList = () => {
       <Datagrid
         rowClick="show"
         bulkActionButtons={false}
-        sx={{
-          "& .MuiTableRow-hover": {
-            "&:hover": {
-              backgroundColor: clex_secondary_colours_dark["purple"],
-              color: "white",
-            },
-          },
-          "& .MuiTableCell-root": {
-            color: "inherit",
-          },
-        }}
+        hover={false}
       >
         <TextField source="id" label="Username" />
         <TextField source="pw_name" label="Name" />

diff --git a/src/util/theme/theme.tsx b/src/util/theme/theme.tsx
@@ -33,7 +33,26 @@ const dashboardTheme = {
                 },
             },
         },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    color:"inherit",
+                }
+            }
+        },
+        RaDatagrid: {
+            styleOverrides: {
+                root: {
+                    "& .RaDatagrid-clickableRow": {
+                        ":hover": {
+                            backgroundColor: clex_secondary_colours_dark["purple"],
+                            color: "white",
+                          },
+                    }
+                }
+            }
+        },
     },
 };
 
-export {dashboardTheme};
+export {dashboardTheme};