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

user_8359355 0
Viewed 416

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?

emotion material-ui reactjs
1 Answers

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.

user_21197570
Related