[system] sx prop supplied as a function of theme causes a warning

[AsemK]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.
  There is a similar issue sx prop as a function for type safety #26631. However, the motivation is for type safety, which different from what I am describing here.

Current Behavior 😯

sx prop is expected to be an object where single properties can be functions of theme. Supplying a function for the sx prop instead of an object works! but gives a warning: Warning: Failed prop type: Invalid prop "sx" of type "function"

Expected Behavior 🤔

It should be allowed to supply a function to sx instead of an object. The function should take theme and return an object. In many scenarios, this is much better than supplying individual functions for each sx object property. In some use cases, it is not possible to get the desired behavior without supplying the sx prop as a function. For example: suppose you want Tab to be inside an Appbar and take its full height. In that case, you can do:
<Tab sx={(theme) => theme.mixins.toolbar }/>
This works in the latest release "beta.2", but gives the mentioned warning above. As a fallback, you can currently use styled to achieve the same thing without warning. sx is much more convenient here in my perspective.

[mnajdova]

I remember we had a discussion about this API in #23053, I could find this comment - #23053 (comment)

The idea we had at the start was that the values are anyway pulled from the theme, so it may not be needed as an API, but I can see now this use-case for spreading mixins. I think we can add this API.

@mui-org/core for opinion.

[TheUnlocked]

I just ran into a situation where this would be very useful and where styled doesn't serve as a workaround. I have a TextField that I want to look like an h6 that you can type in, and it would be extremely convenient to be able to write InputProps={{ sx: theme => theme.typography.h6 }} rather than needing to do things like fontSize: theme => theme.typography.h6.fontSize for all of the relevant properties.

[mnajdova]

I think this is worth adding as an API. @hbjORbj would you be interested in giving it a try? :)

[hbjORbj]

@AsemK @TheUnlocked Thanks for the report. It is worth mentioning that

sx prop is expected to be an object where single properties can be functions of theme. Supplying a function for the sx prop instead of an object works! but gives a warning: Warning: Failed prop type: Invalid prop "sx" of type "function"

is not true. You will find that theme properties like p: 1 or m: 10 are not resolved and hence do not take effect right now. This requires a change to the implementation. This is being addressed in this PR: #29198

You can check out this demo: https://codesandbox.io/s/basictabs-material-demo-forked-dwslp?file=/demo.js