Notice that the value passed to globalCss is a variable instead of a function. Pigment CSS thinks that it's not a function, that's why the CSS does not generated (with Emotion error):
Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`
The fix is simple, we check the type after the evaluation and then pass the theme if it's a function.
Found this bug from https://github.com/mui/material-ui/pull/42640
Root cause
The code of CssBaseline looks like this:
However, after building Material UI as a package and Next.js import it, the code before passing to Pigment is:
Notice that the value passed to
globalCss
is a variable instead of a function. Pigment CSS thinks that it's not a function, that's why the CSS does not generated (with Emotion error):The fix is simple, we check the type after the evaluation and then pass the theme if it's a function.