theme prop is not passed down to styled component

[jakubsuszynski]

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown

System:

• OS: macOS 13.5.1
• CPU: (10) arm64 Apple M1 Pro
• Memory: 176.70 MB / 32.00 GB
• Shell: 5.9 - /bin/zsh

  Binaries:

• Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
• Yarn: 1.22.19 - ~/.nvm/versions/node/v14.18.3/bin/yarn
• npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm

  Reproduction

  https://codesandbox.io/s/styled-components-base-forked-s54vmg?file=/index.js

Steps to reproduce

Create component which accepts theme prop, for example enum or string Style it using styled-components Pass prop theme to styled component

Expected Behavior

Prop passed to styled component should work

Actual Behavior

Theme prop is not getting passed. Probably because styled-component expects it to be Theme object, instead of anything else. Currently I'm using an external dependency with component which accepts theme prop. I cannot style it with styled components, because string theme prop is not being passed down.

[bigkho]

No external dependencies are required. Theme props work differently with styled-components. You can find the documentation here.

[jakubsuszynski]

No external dependencies are required. Theme props work differently with styled-components. You can find the documentation here.

You don't understand. You can check my codesandbox link for reference. I have an external component which requires theme prop, which is a string ("red", "blue" etc). Besides that, I want to style it using styled-components. After wrapping it in styled, my theme prop is not being passed to that external component, because it's taken by styled wrapper...

[bigkho]

You're correct, I see what's going on. It seems that styled-components may need something to distinguish between their own theme prop. However, it may be inconsistent in the first place to use a theme in an non-styled-component and then wrapping it with styled. In your codesandbox example, simply changing theme to any other prop name will suffice. Ideally, when working with themes with styled-components, you're using a ThemeProvider where you can use the theme prop to override colors. If you're attempting to use theme in the context you've provided, it's likely just worth naming it something else to avoid the issue entirely. Please let me know if there's something I am missing here, and I will look into styled-components to see if there's something better that could be done if this is problem.

[jakubsuszynski]

You're correct, I see what's going on. It seems that styled-components may need something to distinguish between their own theme prop. However, it may be inconsistent in the first place to use a theme in an non-styled-component and then wrapping it with styled. In your codesandbox example, simply changing theme to any other prop name will suffice. Ideally, when working with themes with styled-components, you're using a ThemeProvider where you can use the theme prop to override colors. If you're attempting to use theme in the context you've provided, it's likely just worth naming it something else to avoid the issue entirely. Please let me know if there's something I am missing here, and I will look into styled-components to see if there's something better that could be done if this is problem.

The case is that component is external, so I cannot change name of it. Workaround would be to create wrapper component which'd pass this prop with different name, but yeah - it's an workaround. The problem is that it's used really widely in my case and replacing it would be a pain in the ass ;)

[DmitryBerdnikov]

I faced the same problem. Styled-components version 6 doesn't pass prop name theme to styled component .

Working solution is wrapping components with different prop name, like buttonTheme and then pass buttonTheme as theme to other component, but it's frustrating

Maybe this code does it

Maybe it's better to make configurable theme prop name to styled components using StyleSheetManager

[nitzcard]

I also have this problem in a third party library where I can't change the prop name.