[graphiql] add className prop. Additional class names which will be…

… appended to the GraphiQL container element (#3643)
graphql · Jul 24, 2024 · 82f1ecc · 82f1ecc
1 parent 88c3d5a
commit 82f1ecc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/lazy-beers-confess.md b/.changeset/lazy-beers-confess.md
@@ -0,0 +1,5 @@
+---
+"graphiql": minor
+---
+
+add `className` prop. Additional class names which will be appended to the GraphiQL container element
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -225,6 +225,10 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * rendered with a specific theme
      */
     forcedTheme?: (typeof THEMES)[number];
+    /**
+     * Additional class names which will be appended to the container element.
+     */
+    className?: string;
   };
 
 const THEMES = ['light', 'dark', 'system'] as const;
@@ -465,9 +469,14 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     </Tooltip>
   );
 
+  const className = props.className ? ` ${props.className}` : '';
+
   return (
     <Tooltip.Provider>
-      <div data-testid="graphiql-container" className="graphiql-container">
+      <div
+        data-testid="graphiql-container"
+        className={`graphiql-container${className}`}
+      >
         <div className="graphiql-sidebar">
           <div className="graphiql-sidebar-section">
             {pluginContext?.plugins.map((plugin, index) => {