Functions that are interpolated in css calls will be stringified

Asked Jun 23 '22 at 19:37

Active Jun 23 '22 at 19:37

Viewed 233 times

I have this code and I have this error message and whatever I change made, error doesn't go away.

const track = css`
  background: ${({ theme }) => rgba(theme.colors.gray['000'], 0.25)};
`

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) => csscolor: ${props.color} It can be called directly with props or interpolated in a styled call like this let SomeComponent = styled('div')${dynamicStyle}

Can anybody explain what is the issue here? and solution? Existing solutions which can be found in Google for this error doesn't work.

asked Jun 23 '22 at 19:37

SkyDev

The error message is the solution. – windowsill Jun 23 '22 at 19:59
@windowsill can you change it from the error message please? – SkyDev Jun 23 '22 at 20:09
this has a lot of examples https://emotion.sh/docs/theming – windowsill Jun 23 '22 at 20:18
@windowsill yes I tried them and it still give me error. Why don't you give me update? instead of the documentation link? – SkyDev Jun 23 '22 at 20:38
None of those examples have interpolated strings in them. The error you're getting it because of the usage of an interpolated string. – windowsill Jun 24 '22 at 01:00
Yes, can you fix it please? Instead of general guideline can you fix? – SkyDev Jun 24 '22 at 15:50

Functions that are interpolated in css calls will be stringified

0 Answers0