TS doesn't see props after «styled()» of «withTheme(styled.button`...`)»

[Opty1712]

Linking with https://github.com/callstack/linaria/issues/893

Environment

• macOS Monterrey
• yarn 3 (PnP)
• TS 4.5.2
• "@linaria/core": "^3.0.0-beta.15",
• "@linaria/react": "^3.0.0-beta.15",
• "@linaria/babel-preset": "^3.0.0-beta.15",
• "@linaria/shaker": "^3.0.0-beta.15",
• "@linaria/webpack-loader": "^3.0.0-beta.16",
• "@callstack/react-theme-provider": "^3.0.7",
• bundler - storybook@6
• node 14.17.6

Description

export const Select = () => (
    <OptionButton type="button" data-qa-id="listItem-btn" />
);

const Button = withTheme(styled.button<Theme>`
    width: 100%;
`);

export const OptionButton = styled(Button)`
    width: 50%;
`;

If I add Button directly - no error

If I remove withTheme - no error too

Reproducible Demo

https://codesandbox.io/s/wild-grass-g4e0u?file=/src/App.tsx

[R4YM3]

@Opty1712 did you found a work around for this?

[R4YM3]

Yesterday i took some time to debug this and found what is going on.

You have:

export const Select = () => (
    <OptionButton type="button" data-qa-id="listItem-btn" />
);

const Button = withTheme(styled.button<Theme>`
    width: 100%;
`);

export const OptionButton = styled(Button)`
    width: 50%;
`;

It looks that your Theme type is (when looking at the error)

interface Theme {
    type: string;
    "data-ga-id": string;
}

You need to make another type:

interface IWithTheme {
    theme: Theme;
}

and pass this on:

const Button = withTheme(styled.button<IWithTheme>`
    width: 100%;
`);

It wasn't obvious for me aswell, but withTheme HOC the theme is set in the theme prop. Which is ofcourse logical, since you could also pass other props.