Can't use Box to do one off style overrides of external components when there are props collisions

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/resizablebox-prop-collision-cedc3v?file=/src/App.tsx

Current behavior 😯

using

<Box component={MyBox /* MyBox does use the className prop */}
myprop={42 /* myprop is some custom prop of MyBox*/}
sx={ /*using sx to get theme values, or to compose styles, or for consistency.. */
  theme => ({backgroundColor: theme.foo.bar})
}
>
 ...
</Box>

works except if myExternalProp happens to be one of the system prop (it gets swallowed). As an exemple, imagine a CountryBox which take the flag and border props. flag works, but border collides with css borders. In the example, it's ResizableBox from 'react-resizable'. The 'resizeHandle' prop works but the 'width' prop doesn't.

Expected behavior 🤔

Should be able to use pass any props to the component, because system props should be in sx, not in props of Box

Context 🔦

I want to use the mui styling system (to have inheritence, composition, theme access, etc) to do a one off customization of a component accepting a className, without adding dom elements and using nested selectors.

One way to do it is to use styled but this requires creating an intermediate component..

const MyBoxSx = styled(MyBox)({}); /* MyBox does use the className prop */
<MyBoxSx
myprop={42 /* myprop is some custom prop of MyBox*/}
sx={ /*using sx to get theme values, or to compose styles, or for consistency.. */
  theme => ({backgroundColor: theme.foo.bar})
}

Your environment 🌎

No response

Start with the CodeSandbox example in src/App.tsx and reproduce the Box usage with ResizableBox, comparing the working resizeHandle prop with the colliding width prop. The change is complete when arbitrary external component props such as width or border pass through while sx styling continues to work.