diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
index 47c53e1c493..22beee38bfb 100644
--- a/packages/graphiql-react/src/editor/components/header-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -2,6 +2,7 @@ import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 
 import '../style/codemirror.css';
 import '../style/fold.css';
+import '../style/editor.css';
 
 type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 
diff --git a/packages/graphiql-react/src/editor/components/query-editor.tsx b/packages/graphiql-react/src/editor/components/query-editor.tsx
index 5dc27d7f7d9..368b395cd4f 100644
--- a/packages/graphiql-react/src/editor/components/query-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/query-editor.tsx
@@ -7,6 +7,7 @@ import '../style/hint.css';
 import '../style/info.css';
 import '../style/jump.css';
 import '../style/auto-insertion.css';
+import '../style/editor.css';
 
 export function QueryEditor(props: UseQueryEditorArgs) {
   const ref = useQueryEditor(props);
diff --git a/packages/graphiql-react/src/editor/components/response-editor.tsx b/packages/graphiql-react/src/editor/components/response-editor.tsx
index 519e7d3cc0c..a70e54d0bfa 100644
--- a/packages/graphiql-react/src/editor/components/response-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/response-editor.tsx
@@ -3,6 +3,7 @@ import { useResponseEditor, UseResponseEditorArgs } from '../response-editor';
 import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/info.css';
+import '../style/editor.css';
 
 export function ResponseEditor(props: UseResponseEditorArgs) {
   const ref = useResponseEditor(props);
diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
index 76e9e79d932..162987473f0 100644
--- a/packages/graphiql-react/src/editor/components/variable-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -4,6 +4,7 @@ import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/lint.css';
 import '../style/hint.css';
+import '../style/editor.css';
 
 type VariableEditorProps = UseVariableEditorArgs & {
   isHidden?: boolean;
diff --git a/packages/graphiql-react/src/editor/style/editor.css b/packages/graphiql-react/src/editor/style/editor.css
new file mode 100644
index 00000000000..abc20c7d9bc
--- /dev/null
+++ b/packages/graphiql-react/src/editor/style/editor.css
@@ -0,0 +1,10 @@
+.graphiql-editor {
+  height: 100%;
+  position: relative;
+
+  &.hidden {
+    /* Just setting `display: none;` would break the editor gutters */
+    position: absolute;
+    visibility: hidden;
+  }
+}
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index b67883f5904..c7413c47ea7 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -31,17 +31,6 @@
   padding: var(--px-16);
 }
 
-/* Any codemirror editor */
-.graphiql-container .graphiql-editor {
-  height: 100%;
-  position: relative;
-}
-.graphiql-container .graphiql-editor.hidden {
-  /* Just setting `display: none;` would break the editor gutters */
-  position: absolute;
-  visibility: hidden;
-}
-
 /* The tab bar for editor tools */
 .graphiql-container .graphiql-editor-tools {
   align-items: center;