Ask questionsStrongly typed theme property


I am using TypeScript and ThemeProvider for my components, and I had a couple of questions:

  1. First of all, my components are created using map, so I used to assign a key to each one, now I have put ThemeProvider to be the top parent component, and hence I need to set the key on that. I was just wondering does it hurt to do this? Or should I find a way to create a single ThemeProvider?

  2. Since I'm using TypeScript, it would be very nice if I could somehow make my props.theme property be strongly typed. Right now when I hover over props.theme, I see that the type is any. It would VERY nice if I could somehow define the type for the theme property while not changing the inferred type for props

Thank you, and the more I use this library, the more I find out how great it is!


Answer questions brendanmc6

@kettanaito Thank you for the solution, however your claim that "name matters not" for styled-components.d.ts was misleading in my case. In my project, naming the file styled-components.d.ts was overwriting the entire module declaration. I have to name it styled.d.ts or put the declaration with my other global types inside index.d.ts

This behavior is in a fresh next.js typescript project with default configuration.

Otherwise, this works great, thank you!


Related questions

Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted! hot 3
Invariant Violation: Minified React error #321; when trying to use styled-components as dependency on published npm package hot 2
CSS grows during successive server-side rendering hot 1
SSR Memory Leak with v5 release candidate 2 hot 1
Failed to parse declaration fontFamily having multiple fonts hot 1
5.0 Roadmap hot 1
Several instances of 'styled-components' initialized in this application. hot 1
Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted! hot 1
invariant violation with HashRouter and Switch hot 1
Workaround to problem "Cannot find a StyleSheet instance" hot 1
Attaching data attributes doesn't work in test hot 1
"as" prop is breaking rebass component usage hot 1
Styled Components naming convention hot 1
Uncaught Error: Cannot create styled-component for component: undefined hot 1
5.0 Roadmap hot 1
Github User Rank List