Customize react-query devtools styles

marmelab · Jun 21, 2024 · ad87040 · ad87040
1 parent 188293e
commit ad87040
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,7 +35,7 @@ const MyLayout = (props: any) => (
         "& .RaHeader-toolbar > *": {
           flexBasis: "33.33%",
           // FIXME: This should be fixed in ra-navigation
-          alignItems: "center",
+          // alignItems: "center",
           justifyContent: "center",
         },
         "& .RaHeader-toolbar > *:first-of-type": {
@@ -49,7 +49,11 @@ const MyLayout = (props: any) => (
         },
       }}
     />
-    <ReactQueryDevtools initialIsOpen={false} />
+    <ReactQueryDevtools
+      initialIsOpen={false}
+      // To avoid collision with the ConnectionWatcher notifications
+      buttonPosition="bottom-left"
+    />
     <ConnectionWatcher />
   </>
 );

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,12 @@
 body {
   margin: 0;
+}
+
+/* 
+Because the style prop no longer exist in TanStack Query v5,
+we have to use this rule to customize ReactQueryDevtools button size:
+*/
+.tsqd-transitions-container>div {
+  height: 30px;
+  width: 30px;
 }