Support array in `sx` prop

[siriwatknp]

Summary

The sx prop should support array format to cover these cases:

• array of styles

  // developer's codebase
  <div
   sx={[
     { display: 'flex',  },
     numSelected > 0 && {
        bgcolor: 'white',
      },
   ]}
  />
  
  // transformed
  <div {...sx(['s1o8xp19', 's1o8xp19-1'], {})} />

• array of function

  // developer's codebase
  <div
   sx={[
     theme => ({ display: 'flex', fontSize: theme.vars.font.xl }),
     numSelected > 0 && (theme => {
        bgcolor: theme.vars.palette.primary.main,
        …theme.applyStyles('dark', {
          bgcolor: theme.vars.palette.primary.light,
        })
      }),
   ]}
  />
  
  // transformed
  <div {...sx(['s1xbsywq', numSelected > 0 && 's1xbsywq-0'], {})} />

Examples

No response

Motivation

To ease v5 to v6 migration and ensure feature parity with the current MUI system's sx.

Search keywords: array sx prop

[brijeshb42]

This, though possible, is slightly tricky to implement, especially with all the conditionals. I have started working on it and I'll see where this leads to.