diff --git a/src/index.tsx b/src/index.tsx
index a5d2490ba..836100dc5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -19,6 +19,19 @@ ReactDOM.render(
   document.getElementById("root"),
 );
 
+// TODO: Remove this workaround when we get rid of material-ui-color and update to React 19+.
+/**
+ * With built-in MUI components, we usually customize the zIndex via styleOverrides in src\Themes\ui\Theme.tsx. However,
+ * material-ui-color uses a prefix for all class names; for example, instead of "MuiPopover-root", it's
+ * "ColorPicker-MuiPopover-root". This library does not provide good ways to customize its components extensively, so we
+ * have to find a hacky way to work around this problem.
+ */
+const styleElement = document.createElement("style");
+styleElement.textContent = `#color-popover {
+  z-index: 20000 !important;
+}`;
+document.head.appendChild(styleElement);
+
 setTimeout(newRemoteFileApiConnection, 2000);
 
 function rerender(): void {