css function imported from '@emotion/react' does not work with mui styled

Question

the css function imported from '@emotion/react' works in the case,

const Button = styled('button')`
  ${css`background-color: blue`}
`

but doesn't work in the case,

const Button = styled('button')(props => `
  ${css`background-color: blue`}
`);

Check the codesandbox link for complete example.

What is the difference between the above two methods? Why does it work in the first case but doesn't work in the second case?

Answer 1

If you want to pass a prop they should be inside template literal, for example

const Button = styled('button')(props => `
  background-color: ${props => props.color};
`);

you don't need to use css function. Why it doesn't work, I assume styled expect a template literal instead of function and that's why.