callstack / callstack/react-theme-provider

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

未关闭
#130 2 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
JavaScript
星标
467
派生
53
PR 合并指标
30 天内没有已合并 PR

描述

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

```ts
export const Select = () => (

);

const Button = withTheme(styled.button`
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

贡献指南

打开贡献指南

调研方向

从可复现的 CodeSandbox 开始,比较直接使用 Button 的情况和移除 withTheme 的情况。跟踪 TypeScript 如何通过 styled() 和 withTheme() 推断 props;当 OptionButton 能够无错误地接受示例中的 props,同时保留现有的主题化组合时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。