diff --git a/.changeset/heavy-pets-rule.md b/.changeset/heavy-pets-rule.md
new file mode 100644
index 000000000..84b813edb
--- /dev/null
+++ b/.changeset/heavy-pets-rule.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Distribute `css` prop attachment over props that are union types
diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts
index b43dc4fa0..ad92eaea4 100644
--- a/packages/react/types/jsx-namespace.d.ts
+++ b/packages/react/types/jsx-namespace.d.ts
@@ -86,8 +86,9 @@ export namespace EmotionJSX {
     extends ReactJSXElementAttributesProperty {}
   interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
 
-  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
-    ReactJSXLibraryManagedAttributes<C, P>
+  type LibraryManagedAttributes<C, P> = P extends unknown
+    ? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
+    : never
 
   interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
   interface IntrinsicClassAttributes<T>
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index e4b71ec8e..06f8785c7 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -182,6 +182,23 @@ const anim1 = keyframes`
   ;<CompWithoutProps css={{ backgroundColor: 'hotpink' }} />
 }
 
+{
+  const CompWithConditionalClassNameSupport = (
+    _props: { foo: true; className?: string } | { foo: false }
+  ) => {
+    return null
+  }
+  ;<CompWithConditionalClassNameSupport
+    foo={true}
+    css={{ backgroundColor: 'hotpink' }}
+  />
+  ;<CompWithConditionalClassNameSupport
+    foo={false}
+    // $ExpectError
+    css={{ backgroundColor: 'hotpink' }}
+  />
+}
+
 {
   // based on the code from @types/react@17.x
   // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548