"Theme is not defined" Error in @mui/material v6 sx Prop When Using pigment-css

[wh5938316]

Steps to reproduce

This works fine:

<Button
    variant='contained'
    sx={theme => ({
      bgcolor: theme.palette.common.black,
    })}
>
    Test
</Button>

However, this throws an error:

<Button
    variant='contained'
    sx={{
      bgcolor: theme => theme.palette.common.black,
    }}
>
    Test
</Button>

I would like to know if this behavior is intentional or if it’s a bug.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: pigment-css, v6

[siriwatknp]

Yes, it's intended. Theme callback should not be a value of a CSS property.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @wh5938316! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!