Override a styled component that use $ for variables does not pass props correctly

[multivoltage]

Environment

Following there is my local pc env. The isse on codesanbox is impossible to fetch

System:

• OS: macOS 13.1
• CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
• Memory: 2.97 GB / 16.00 GB
• Shell: 5.8.1 - /bin/zsh

  Binaries:

• Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm

  npmPackages:

• styled-components: ^6.1.8 => 6.1.8

Reproduction

https://codesandbox.io/p/sandbox/strange-johnson-8jrf82

Steps to reproduce

• Create a styled div called Box that use variables with $ (example $background) since linter suggest to do not use directly "background" as props.
• Override Box creating const MyBox = styled(Box)
• pass this variable (in my case $background)

Expected Behavior

• MyBox should receive correctly prop $background

Actual Behavior

• MyBox receives undefined as $background

[RowanDZ]

This is expected behaviour: https://styled-components.com/docs/api#transient-props

$ is the Styled-components prefix for passing props to the CSS definition, without you need to worry that it will end up in the underlying component/element. It's actually very useful.

In your specific case, you could:

• use this https://styled-components.com/docs/api#shouldforwardprop to pass it anyway.
• don't listen to your linter/disable the rule for this component.
• rename the prop to boxBackground or something.

[multivoltage]

I'm not agree but I'll try to use different implementation :)