[system] Allow function type for sx prop

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #27492

This PR enables sx prop to accept a function type in addition to object type.

- export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme>;
+ /**
+ * The `SxProps` can be either object or function
+ */
+ export type SxProps<Theme extends object = {}> =
+ | SystemStyleObject<Theme>
+ | ((theme: Theme) => SystemStyleObject<Theme>);

Code sandbox: https://codesandbox.io/s/basictabs-material-demo-forked-dwslp?file=/demo.js

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 9098874

[siriwatknp]

This does not work.

<Tab
  label="Item One"
  sx={(theme) => ({
    ...theme.typography.h6,
    p: 10,
  })}
/>

I think you have to update styleFunctionSx.js implementation a bit. Also, please add a test to verify that it works.

My suggestion for the next PR contains a lot of file changes. first commit should be the implementation change and the next commit can be the command or script running. This is easier to review. 👍

[hbjORbj]

@siriwatknp Hey! I updated the code and the code sandbox.

[siriwatknp]

@siriwatknp Hey! I updated the code and the code sandbox.

Nice, can you add one more test case to styleFuncionSx.test.js to test sx as a function?

[siriwatknp]

👍 Awesome.

[eps1lon]

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"

If that is the only problem, then why does this PR change the implementation?

The problem is purely about propTypes (and probably TypeScript). There was no mention that the behavior is incorrect.

[hbjORbj]

@eps1lon
The following comment is from a developer in the community, but it is found to be a false statement. As @siriwatknp pointed out, theme properties like { p: 10 } are not resolved without changing the implementation. I will edit the description.

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"