search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
693 stars 36 forks source link

[sx] theme should not wrap in an object #50

Closed siriwatknp closed 4 months ago

siriwatknp commented 4 months ago

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