Box styles don't have highest priority

[jbojcic1]

When you wrap syled component with Box with clone set to true, the Box styles should override the styles of the styled component.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Box styles are overridden by the inner styled component styles.

Expected Behavior 🤔

Docs state:
⚠️ The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.
So my understanding is that Box styles should override the styles of the styled component if Box is imported last.

Steps to Reproduce 🕹

https://codesandbox.io/s/charming-feather-yji6s?file=/src/App.js

Notice how width of inner styled div wins over Box width even though I imported box last.

[oliviertassinari]

Duplicate of #18496

[oliviertassinari]

1. We are removing this prop in v5.
2. You can configure the CSS injection order, we document it in the docs.

[jbojcic1]

@oliviertassinari regarding #2 are you referring to this https://material-ui.com/styles/advanced/#css-injection-order?

I've read that but I don't understand how that affects Box component styles. I understand I can tell it where to inject all material styles in the head but what I don't understand is how to tell it to always put only Box styles to the bottom.

And import order doesn't seem to work for me either as importing the Box last doesn't help.

[oliviertassinari]

@jbojcic1 In your case, the simplest is to upgrade to v5: you get the sx prop for free (unless disabled) when using styled (currently exposed as experimentalStyled): https://codesandbox.io/s/sad-euler-g8b2m?file=/src/App.js