Cannot wrap the application to properly work with server-side rendering for Nextjs and error on type with styled-tools

[mimiqkz]

I have been trying to find a way for wrap the application to use with Nextjs. I followed the example shows in here https://codesandbox.io/s/eager-cherry-57c9u?file=/pages/_document.js.
However, it doesn't seem to work when you're doing it with typescript

Also I got this error upon trying to use styled with styled-tools.
Property 'theme' is missing in type '{ children: Element; }' but required in type 'Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & DefaultTheme & { theme: ThemeWithPalette; tone?: number | undefined; }, never>'.

[cristianbote]

Hi @mimiqkz thanks for opening this issue!

Are you able to share a codesandbox with the code that is failing? 🤔 the linked one is the example. Also, looks like you are defining types for styled-tools and goober to work together? Sharing those would be helpful as well.

[mimiqkz]

@cristianbote Yes, here is something https://codesandbox.io/s/brave-proskuriakova-i4ews?file=/pages/index.tsx

[mimiqkz]

@cristianbote any news on this?

[cristianbote]

Hey @mimiqkz I did not had a chance to look into it. But quick question does this fails for you because of the type error? Or it fails because of something else? To overcome that error quickly you could mark it optional for the Wrapper.

const Wrapper = styled("footer")<{theme?: string}>`
  // [...]
`

[mimiqkz]

@cristianbote Hello, I wanted to use palette from import { palette } from "styled-tools";.
However,
I got Property 'theme' is missing in type '{ children: string; }' but required in type 'Pick<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & DefaultTheme & { theme: ThemeWithPalette; tone?: number; }, "slot" | ... 256 more ... | "tone">'.

So does that mean I can not use styled-tools at all? It seems like, in their npm package, they claimed that it works for all CSS-in-JS.
Also , why do we need to pass in theme as props there :/ ?

[dougg0k]

Hey @mimiqkz you can try improving the typing.

goober.d.ts

declare module "goober" {
	export interface DefaultTheme extends StyledFunction {
		palette: YourPaletteType; // or typeof theme.palette; (by importing the theme file).
	}
}