[sx] theme should not wrap in an object

[siriwatknp]

Steps to reproduce

Render any component with sx usage like this will throw an Error Cannot read property 'applyStyles' of undefined:

<Box
  sx={theme => ({
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: 280,
    backgroundImage: 'var(--Image-light)',
    ...theme.applyStyles('dark', {
      backgroundImage: 'var(--Image-dark)',
    }),
  })}

Current behavior

The correct syntax for using theme from sx prop is to declare a parameter, not object pattern ({ theme })

Expected behavior

The sx prop should work with sx={theme => …}

Context

I am working on a codemod for transforming sx prop and I stumbled on this error.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: sx theme