react-theme-provider icon indicating copy to clipboard operation
react-theme-provider copied to clipboard

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

Open Opty1712 opened this issue 4 years ago • 2 comments

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%;
`;
```	
![image](https://user-images.githubusercontent.com/14236476/147383113-585a732c-c430-457d-ab9e-1887d8d3836b.png)

![image](https://user-images.githubusercontent.com/14236476/147383138-1f1174a0-703f-40e8-b648-d2fc0fec343a.png)


If I add Button directly - no error
![image](https://user-images.githubusercontent.com/14236476/147383131-b47c084e-e3f2-41b7-b542-62f6f029881d.png)

If I remove `withTheme` - no error too
![image](https://user-images.githubusercontent.com/14236476/147383160-57b5fdb7-da88-481e-a422-e39773c13036.png)

## Reproducible Demo

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

Opty1712 avatar Dec 25 '21 10:12 Opty1712

@Opty1712 did you found a work around for this?

R4YM3 avatar Feb 07 '22 15:02 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.

R4YM3 avatar Feb 09 '22 08:02 R4YM3