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.