Apply sx prop to Select's parent for custom styles

[strackoverflow]

Closes #3599

This PR fixes a bug where the sx prop for the Select component didn't have any effect.

Given the following custom styles, here is the before/after:

<Select sx={{borderRadius: '12px', border: '1px dashed #000000'}}>

Before	After

It seems as though the custom styles need to be applied to the TextInputWrapper component rather than the StyledSelect component, but I'm wondering if there are any drawbacks or complications from applying all of the custom styles to this element.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: ecefb0a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	104.06 KB (+0.01% 🔺)
dist/browser.umd.js	104.61 KB (+0.01% 🔺)

[siddharthkp]

Almost there! Just a tiny change needed

[siddharthkp]

Hi! This is 99% there.

...sx does a shallow merge with the existing styles so it might accidentally override nested style objects. We have a merge utility for sx that deep merges. Here is a another component that uses merge for reference.

---

For example, with shallow merge:

<Select sx={{
 '@media screen and (forced-colors: active)': {
    color: 'fg.muted'
 }
}}>

...props.sx will completely overwrite the '@media screen and (forced-colors: active)' key and remove svg styles

[strackoverflow]

Thanks! Makes sense!

[siddharthkp]

⚠️ No Changeset found

Here's the format we follow for changesets:

---
"@primer/react": patch
---

Select: Add support for `sx` prop

<!-- Changed components: Select -->

[siddharthkp]

Looks great!

Feel free to merge it whenever you're ready!