Skip to content

fix(@emotion/primitives-core): skip style and ref when finalTag is React.Fragment#3378

Open
phthhieu wants to merge 1 commit into
emotion-js:mainfrom
phthhieu:fix/react-fragment-style-prop
Open

fix(@emotion/primitives-core): skip style and ref when finalTag is React.Fragment#3378
phthhieu wants to merge 1 commit into
emotion-js:mainfrom
phthhieu:fix/react-fragment-style-prop

Conversation

@phthhieu

Copy link
Copy Markdown

What:

Prevent style and ref props from being forwarded to React.Fragment inside @emotion/primitives-core's styled component render path.

Why:

React.Fragment only accepts key and children as props. When a styled component resolves to React.Fragment — either via styled(React.Fragment)\...`or theas={React.Fragment}shorthand — the code increateStyledunconditionally assignednewProps.style = [computedStyles, props.style]before callingReact.createElement(finalTag, newProps). This passed an invalid style` prop to the Fragment.

React Native 0.81+ (and React Native 0.78+ per some reports) added strict prop validation that surfaces this as a runtime error:

"Invalid prop style supplied to React.Fragment. React.Fragment can only have key and children props."

Fixes #3359.

How:

Guard the style and ref assignments with if (finalTag !== React.Fragment) so those props are only added when the target element is capable of accepting them.

- newProps.style = [css.apply(mergedProps, styles), props.style]
- if (ref) {
-   newProps.ref = ref
- }
+ if (finalTag !== React.Fragment) {
+   newProps.style = [css.apply(mergedProps, styles), props.style]
+   if (ref) {
+     newProps.ref = ref
+   }
+ }

Checklist:

  • Documentation N/A
  • Tests
  • Code complete
  • Changeset

🤖 Generated with Claude Code | Session: ffa7459a-75f5-425f-8eb4-d23918b2eaf9

…act.Fragment

React.Fragment only accepts `key` and `children` props. When a styled
component resolves to React.Fragment (via `styled(React.Fragment)` or
the `as={React.Fragment}` prop), the unconditional `newProps.style`
assignment would pass an invalid `style` prop to the Fragment. React
Native 0.81+ added strict validation that surfaces this as an error.

Guard the style and ref assignments behind `finalTag !== React.Fragment`
to avoid forwarding unsupported props.

Fixes emotion-js#3359

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented May 15, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1b8a928

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@codesandbox-ci

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@phthhieu

Copy link
Copy Markdown
Author

Note on CI failures: The yarn test:typescript (dtslint) failures affect all packages uniformly — including ones this PR never touches (@emotion/cache, @emotion/hash, @emotion/memoize, etc.). The errors are:

error TS5101: Option 'baseUrl' is deprecated and will stop functioning in TypeScript 7.0.
error TS5107: Option 'target=ES5' is deprecated and will stop functioning in TypeScript 7.0.

These are pre-existing on main — every recent commit on main has a failing CI run (example). This PR does not introduce them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Invalid prop %s supplied to React.Fragment. React.Fragment can only have key and children props. style

1 participant