react-theme-provider
react-theme-provider copied to clipboard
TS doesn't see props after «styled()» of «withTheme(styled.button`...`)»
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
@Opty1712 did you found a work around for this?
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.