From 09d7fa8f08770ee7fb4cfe06d1349549b28f2690 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 28 Nov 2021 21:29:39 +0100
Subject: [PATCH] [docs] Apply the z-index on the right DOM element

---
 docs/src/modules/components/DemoToolbar.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index d2a284ad8013d6..4e790929596c2d 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -62,14 +62,24 @@ const Root = styled('div')(({ theme }) => ({
   },
 }));
 
-const DemoTooltip = styled(Tooltip)(({ theme }) => ({
-  zIndex: theme.zIndex.appBar - 1,
-}));
+function DemoTooltip(props) {
+  return (
+    <Tooltip
+      componentsProps={{
+        popper: {
+          sx: {
+            zIndex: (theme) => theme.zIndex.appBar - 1,
+          },
+        },
+      }}
+      {...props}
+    />
+  );
+}
 
 function ToggleCodeTooltip(props) {
   const { showSourceHint, ...other } = props;
   const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));
-
   const [open, setOpen] = React.useState(false);
 
   return (