Handle derived sx in Flex.tsx

[rtturner]

Reported this issue #2534

Derived styles are not applied to Flex as it is spread (assumed to be an object?)

Handling the instance where passed sx is a function applies styles appropriately

// This does not work currently
<Flex sx={() => ({ backgroundColor: "red" })} />

// However, this does work
<Box sx={() => ({ backgroundColor: "red" })} />

Wanted to provide a PR along with issue.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
theme-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 12, 2025 3:58pm

[codesandbox-ci]

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.

Latest deployment of this branch, based on commit 93ce9f6:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

[hasparus]

Thank you for the PR!

[hasparus]

🚀 PR was released in v0.17.2 🚀