Summary
1 - Add Typescript
2 - Install styled-components
3 - Apply globalStyle
4 - Bonus 1 - Absolute imports
5 - Bonus 2 - SSR with sty...
For further actions, you may consider blocking this person and/or reporting abuse
If you are using strict TypeScript as I am, this is
_document.tsx
with all types included:thank you
I have been looking for this. Thank you my friend.
If you are using string TypeScript as I am, this is
_document.tsx
with all types included:This was super helpful but i keep getting JSX.element type error at
is there any way to fix this?
Chang from styles:(), to styles:[],
You've saved my time! Thanks!!!
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
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
main
from 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.
Isn't:
should be simply write as:
?
css-tricks.com/box-sizing/
This was super helpful. Thank you! Was getting a SSR component className did not match error when using styled components. This setup fixed it for me.