You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Define a class with a toString method that returns any valid CSS value (CSS custom property reference in my case).
Create an instance of this class.
Use created instance in a styled component as part of a style rule based on props.
Expected Behavior
This interpolation results in toString method being called on a value-object as it should happen in plain JavaScript. Resulting stylesheet would include the value returned by toString, e.g. color: ${() => cssVar}; -> color: var(--css-var);.
Actual Behavior
Expected behaviour is indeed what happens, however styled-components throw an uncaught error into browser console:
Component is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.
This error can be observed in the attached reproduction using browser or CodeSandbox inspector.
After having debugged the error in my code, I've found that the interpolated function () => cssVar or its returned value is treated as React component by styled-components internals. This treatment causes styled-components to expect this "React component" to have a className prop that is passed down to an HTML element. In reality, this is just a plain value-object that should be treated as such – calling toString method on it and interpolating its value without any errors. The method is still called, which solves my previous issue, however the errors are also thrown when previously in v5 they weren't.
The text was updated successfully, but these errors were encountered:
drizzer14
changed the title
Class instance returned from function interpolation causes Component is not a styled component error
Class instance returned from function interpolation causes Component is not a styled component error in v6
May 17, 2024
Environment
System:
Binaries:
npmPackages:
Reproduction
https://codesandbox.io/p/devbox/sc6-react18-component-is-not-sc-fqz9hf
Steps to reproduce
toString
method that returns any valid CSS value (CSS custom property reference in my case).Expected Behavior
This interpolation results in
toString
method being called on a value-object as it should happen in plain JavaScript. Resulting stylesheet would include the value returned bytoString
, e.g.color: ${() => cssVar};
->color: var(--css-var);
.Actual Behavior
Expected behaviour is indeed what happens, however
styled-components
throw an uncaught error into browser console:This error can be observed in the attached reproduction using browser or CodeSandbox inspector.
After having debugged the error in my code, I've found that the interpolated function
() => cssVar
or its returned value is treated as React component bystyled-components
internals. This treatment causesstyled-components
to expect this "React component" to have aclassName
prop that is passed down to an HTML element. In reality, this is just a plain value-object that should be treated as such – callingtoString
method on it and interpolating its value without any errors. The method is still called, which solves my previous issue, however the errors are also thrown when previously in v5 they weren't.The text was updated successfully, but these errors were encountered: