Fantastic walkthrough! Your GlobalStyle setup is much better than the <style jsx global> you get OOTB with Next.js.
I was hoping for a bit more TypeScript config. I'm trying to apply some types to my styled-components. I followed the API reference for Typescript on the styled-components website but I couldn't get it working with my Next.js site. When I tried to apply some props from a DefaultTheme, example
color: ${props => props.theme.colors.main};
I kept getting...
TypeError: Cannot read property 'main' of undefined
I checked your example but there is no TypeScript checking in there.
Have you had any success with adding types to styled-components?
Hi Simon! I'm glad you liked it!
Sorry about the really long delay. I didn't receive a notification.
Did you solve the problem? I never tried to use types on my styles because they have a very dynamic nature, each one is so different from the other that I find counterproductive to create types for them.
About your error: you're trying to get a property main from another one that doesn't exist in the context, which is colors. Have you imported and set the colors property?
Fantastic walkthrough! Your
GlobalStylesetup is much better than the<style jsx global>you get OOTB with Next.js.I was hoping for a bit more TypeScript config. I'm trying to apply some types to my styled-components. I followed the API reference for Typescript on the styled-components website but I couldn't get it working with my Next.js site. When I tried to apply some props from a DefaultTheme, example
I kept getting...
I checked your example but there is no TypeScript checking in there.
Have you had any success with adding types to styled-components?
Hi Simon! I'm glad you liked it!
Sorry about the really long delay. I didn't receive a notification.
Did you solve the problem? I never tried to use types on my styles because they have a very dynamic nature, each one is so different from the other that I find counterproductive to create types for them.
About your error: you're trying to get a property
mainfrom another one that doesn't exist in the context, which iscolors. Have you imported and set the colors property?Include a module file for themes, for styled components, at the root of your project. I found this solution on stackoverflow somewhere recently.