@@ -8,33 +8,21 @@ interface StyleEntry {
 const styleRefs = new Map< string, StyleEntry >();
 
 /**
- * Injects a `<style>` element into the document head, ref-counted by `key`.
+ * Injects a `<style>` element into the document head, ref-counted so that
+ * multiple consumers sharing the same CSS text use a single `<style>` element
+ * (e.g. on the Docs tab where several stories render simultaneously). The
+ * element is removed from the DOM when the last consumer unmounts.
  *
- * When multiple Storybook story instances need the same stylesheet (e.g. on
- * the Docs tab where several stories render simultaneously), this hook ensures
- * only a single `<style>` element is created. It is removed from the DOM when
- * the last consumer unmounts.
- *
- * @param options
- * @param options.key     A unique identifier for the stylesheet. Callers with
- *                        the same key share one `<style>` element. Pass an
- *                        empty string to skip injection.
- * @param options.cssText The CSS text to inject. Pass an empty string to skip
- *                        injection.
+ * @param cssText The CSS text to inject. Pass an empty string to skip
+ *                injection.
  */
-export function useSharedStyle( {
-	key,
-	cssText,
-}: {
-	key: string;
-	cssText: string;
-} ): void {
+export function useSharedStyle( cssText: string ): void {
 	useLayoutEffect( () => {
-		if ( ! key || ! cssText ) {
+		if ( ! cssText ) {
 			return;
 		}
 
-		let entry = styleRefs.get( key );
+		let entry = styleRefs.get( cssText );
 
 		if ( entry ) {
 			entry.refCount++;
@@ -43,15 +31,15 @@ export function useSharedStyle( {
 			style.textContent = cssText;
 			document.head.appendChild( style );
 			entry = { element: style, refCount: 1 };
-			styleRefs.set( key, entry );
+			styleRefs.set( cssText, entry );
 		}
 
 		return () => {
 			entry.refCount--;
 			if ( entry.refCount === 0 ) {
 				entry.element.remove();
-				styleRefs.delete( key );
+				styleRefs.delete( cssText );
 			}
 		};
-	}, [ key, cssText ] );
+	}, [ cssText ] );
 }
@@ -42,10 +42,7 @@ export const WithGlobalCSS = ( Story, context ) => {
 	const { lazyStyles, externalStyles, classes } =
 		config[ context.globals.css ];
 
-	useSharedStyle( {
-		key: 'global:' + context.globals.css,
-		cssText: lazyStyles.join( '\n' ),
-	} );
+	useSharedStyle( lazyStyles.join( '\n' ) );
 
 	return (
 		<div className={ clsx( classes ) }>
 
@@ -37,22 +37,15 @@ export const WithRTL = ( Story, context ) => {
 		return () => removeFilter( 'i18n.gettext_with_context', 'storybook' );
 	}, [ context.globals.direction ] );
 
-	const matchedIndices = [];
 	const stylesToUse = [];
 
-	CONFIG.forEach( ( item, index ) => {
+	CONFIG.forEach( ( item ) => {
 		if ( item.componentIdMatcher.test( context.componentId ) ) {
-			matchedIndices.push( index );
 			stylesToUse.push( ...item[ context.globals.direction ] );
 		}
 	} );
 
-	useSharedStyle( {
-		key: matchedIndices.length
-			? matchedIndices.join( ',' ) + ':' + context.globals.direction
-			: '',
-		cssText: stylesToUse.join( '\n' ),
-	} );
+	useSharedStyle( stylesToUse.join( '\n' ) );
 
 	return (
 		<div ref={ ref } key={ rerenderKey }>