From d334bcd29c003e72858fbf736161cea9b0108095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Tue, 23 Jan 2024 16:05:32 +0100
Subject: [PATCH] [Menu][docs] Fix hydration mismatch error on Base UI's Menu
 docs (#40758)

---
 docs/data/base/components/menu/UseMenu.js  | 186 +++++++++++----------
 docs/data/base/components/menu/UseMenu.tsx | 186 +++++++++++----------
 2 files changed, 188 insertions(+), 184 deletions(-)

diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 95f8d5baa713da..63a00ffd2d08e8 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -123,101 +123,103 @@ function useIsDarkMode() {
 function Styles() {
   // Replace this with your app logic for determining dark mode
   const isDarkMode = useIsDarkMode();
-  return (
-    <style>{`
-  .menu-root {
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-    padding: 5px;
-    margin: 10px 0;
-    min-width: 200px;
-    background: #fff;
-    border: 1px solid ${grey[200]};
-    border-radius: 0.75em;
-    color: ${grey[900]};
-    overflow: auto;
-    outline: 0px;
-    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  .mode-dark .menu-root {
-    background: ${grey[900]};
-    border-color: ${grey[700]};
-    color: ${grey[300]};
-    box-shadow: 0px 2px 6px rgba(0,0,0, 0.50);
-  }
-
-  .menu-item {
-    list-style: none;
-    padding: 8px;
-    border-radius: 0.45em;
-    cursor: default;
-    user-select: none;
-  }
-
-  .menu-item:last-of-type {
-    border-bottom: none;
-  }
-
-  .menu-item.focus-visible {
-    background-color: ${grey[100]};
-    color: ${grey[900]};
-    outline: 0;
-  }
-
-  .mode-dark .menu-item.focus-visible {
-    background-color: ${grey[800]};
-    color: ${grey[300]};
-  }
-
-  .menu-item.disabled {
-    color: ${grey[400]};
-  }
-
-  .mode-dark .menu-item.disabled {
-    color: ${grey[700]};
-  }
-
-  .menu-item:hover:not(.disabled) {
-    background-color: ${grey[100]};
-    color: ${grey[900]};
-  }
-
-  .mode-dark .menu-item:hover:not(.disabled){
-    background-color: ${grey[800]};
-    color: ${grey[300]};
-  }
-
-  .button {
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    padding: 8px 16px;
-    border-radius: 8px;
-    color: white;
-    transition: all 150ms ease;
-    cursor: pointer;
-    background: ${isDarkMode ? grey[900] : '#fff'};
-    border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-    color: ${isDarkMode ? grey[200] : grey[900]};
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-    &:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
+
+  const styles = `
+    .menu-root {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 0.875rem;
+      box-sizing: border-box;
+      padding: 5px;
+      margin: 10px 0;
+      min-width: 200px;
+      background: #fff;
+      border: 1px solid ${grey[200]};
+      border-radius: 0.75em;
+      color: ${grey[900]};
+      overflow: auto;
+      outline: 0px;
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
     }
 
-    &:active {
-      background: ${isDarkMode ? grey[700] : grey[100]};
+    .mode-dark .menu-root {
+      background: ${grey[900]};
+      border-color: ${grey[700]};
+      color: ${grey[300]};
+      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
     }
 
-    &:focus-visible {
-      box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
-      outline: none;
+    .menu-item {
+      list-style: none;
+      padding: 8px;
+      border-radius: 0.45em;
+      cursor: default;
+      user-select: none;
     }
-  }
-  `}</style>
-  );
+
+    .menu-item:last-of-type {
+      border-bottom: none;
+    }
+
+    .menu-item.focus-visible {
+      background-color: ${grey[100]};
+      color: ${grey[900]};
+      outline: 0;
+    }
+
+    .mode-dark .menu-item.focus-visible {
+      background-color: ${grey[800]};
+      color: ${grey[300]};
+    }
+
+    .menu-item.disabled {
+      color: ${grey[400]};
+    }
+
+    .mode-dark .menu-item.disabled {
+      color: ${grey[700]};
+    }
+
+    .menu-item:hover:not(.disabled) {
+      background-color: ${grey[100]};
+      color: ${grey[900]};
+    }
+
+    .mode-dark .menu-item:hover:not(.disabled) {
+      background-color: ${grey[800]};
+      color: ${grey[300]};
+    }
+
+    .button {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
+      cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
+        outline: none;
+      }
+    }
+  `;
+
+  // eslint-disable-next-line react/no-danger
+  return <style dangerouslySetInnerHTML={{ __html: styles }} />;
 }
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index b579ad683f7e70..cd6ae929997db9 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -122,101 +122,103 @@ function useIsDarkMode() {
 function Styles() {
   // Replace this with your app logic for determining dark mode
   const isDarkMode = useIsDarkMode();
-  return (
-    <style>{`
-  .menu-root {
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-    padding: 5px;
-    margin: 10px 0;
-    min-width: 200px;
-    background: #fff;
-    border: 1px solid ${grey[200]};
-    border-radius: 0.75em;
-    color: ${grey[900]};
-    overflow: auto;
-    outline: 0px;
-    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  .mode-dark .menu-root {
-    background: ${grey[900]};
-    border-color: ${grey[700]};
-    color: ${grey[300]};
-    box-shadow: 0px 2px 6px rgba(0,0,0, 0.50);
-  }
-
-  .menu-item {
-    list-style: none;
-    padding: 8px;
-    border-radius: 0.45em;
-    cursor: default;
-    user-select: none;
-  }
-
-  .menu-item:last-of-type {
-    border-bottom: none;
-  }
-
-  .menu-item.focus-visible {
-    background-color: ${grey[100]};
-    color: ${grey[900]};
-    outline: 0;
-  }
-
-  .mode-dark .menu-item.focus-visible {
-    background-color: ${grey[800]};
-    color: ${grey[300]};
-  }
-
-  .menu-item.disabled {
-    color: ${grey[400]};
-  }
-
-  .mode-dark .menu-item.disabled {
-    color: ${grey[700]};
-  }
-
-  .menu-item:hover:not(.disabled) {
-    background-color: ${grey[100]};
-    color: ${grey[900]};
-  }
-
-  .mode-dark .menu-item:hover:not(.disabled){
-    background-color: ${grey[800]};
-    color: ${grey[300]};
-  }
-
-  .button {
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    padding: 8px 16px;
-    border-radius: 8px;
-    color: white;
-    transition: all 150ms ease;
-    cursor: pointer;
-    background: ${isDarkMode ? grey[900] : '#fff'};
-    border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-    color: ${isDarkMode ? grey[200] : grey[900]};
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-    &:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
+
+  const styles = `
+    .menu-root {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 0.875rem;
+      box-sizing: border-box;
+      padding: 5px;
+      margin: 10px 0;
+      min-width: 200px;
+      background: #fff;
+      border: 1px solid ${grey[200]};
+      border-radius: 0.75em;
+      color: ${grey[900]};
+      overflow: auto;
+      outline: 0px;
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
     }
 
-    &:active {
-      background: ${isDarkMode ? grey[700] : grey[100]};
+    .mode-dark .menu-root {
+      background: ${grey[900]};
+      border-color: ${grey[700]};
+      color: ${grey[300]};
+      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
     }
 
-    &:focus-visible {
-      box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
-      outline: none;
+    .menu-item {
+      list-style: none;
+      padding: 8px;
+      border-radius: 0.45em;
+      cursor: default;
+      user-select: none;
     }
-  }
-  `}</style>
-  );
+
+    .menu-item:last-of-type {
+      border-bottom: none;
+    }
+
+    .menu-item.focus-visible {
+      background-color: ${grey[100]};
+      color: ${grey[900]};
+      outline: 0;
+    }
+
+    .mode-dark .menu-item.focus-visible {
+      background-color: ${grey[800]};
+      color: ${grey[300]};
+    }
+
+    .menu-item.disabled {
+      color: ${grey[400]};
+    }
+
+    .mode-dark .menu-item.disabled {
+      color: ${grey[700]};
+    }
+
+    .menu-item:hover:not(.disabled) {
+      background-color: ${grey[100]};
+      color: ${grey[900]};
+    }
+
+    .mode-dark .menu-item:hover:not(.disabled) {
+      background-color: ${grey[800]};
+      color: ${grey[300]};
+    }
+
+    .button {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
+      cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
+        outline: none;
+      }
+    }
+  `;
+
+  // eslint-disable-next-line react/no-danger
+  return <style dangerouslySetInnerHTML={{ __html: styles }} />;
 }