Type inference does not work with Styled wrapper on imported React Component · Issue #1917

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

暗恋学妹的铅笔 · Mysql根据字段汉字首字母排序 - ...· 7 月前 ·

大力的凉面 · VBA|利用字符串拼接存储到字典中，在使用s ...· 8 月前 ·

天涯 · 学习笔记：使用MLX 在Mac 上微调本地LLM· 10 月前 ·

绅士的啤酒 · 【独家推荐】尽在第二书包小说网，阅读乐趣翻倍 ...· 1 年前 ·

文质彬彬的大象 · FLASH色谱纯化理论小讲堂：FLASH ...· 1 年前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When implementing the following code:

import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'
const ChevronRight = styled(Icon)`
  margin-right: 3px;
  margin-left: 6px;
  transition: margin-left ease-in-out 0.25s, margin-right ease-in-out 0.25s;
I get the error:

'ChevronRight' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
This error does not occur when I use React components that I declare as SFCs inside of the app.
The issue is resolved when I explicitly cast ChevronRight:

const ChevronRight: StyledComponentClass<{icon: IconProp}, ThemeInterface>
Type Inference Does not work with 3rd Party Icons
Type Inference Does not work with 3rd Party Component
    Aug 13, 2018
Type Inference Does not work with 3rd Party Component
Type Inference Does not work with 3rd Party React Component
    Aug 13, 2018
Type Inference Does not work with 3rd Party React Component
Type Inference Does not work with Styled wrapper on 3rd Party React Component
    Aug 13, 2018
      changed the title
Type Inference Does not work with Styled wrapper on 3rd Party React Component
Type inference does not work with Styled wrapper on 3rd-party React Component
    Aug 13, 2018
      changed the title
Type inference does not work with Styled wrapper on 3rd-party React Component
Type inference does not work with Styled wrapper on imported React Component
    Aug 13, 2018
 You are receiving this because you authored the thread.
 Reply to this email directly, view it on GitHub
 <#1917 (comment)>,
 or mute the thread
 <https://github.com/notifications/unsubscribe-auth/AHzdlPVy7cazt2wxbO7XxfmkaREVRLIhks5uQbxggaJpZM4V67Oq>
          Diving into some more detail - this issue was caused by a comment block of CSS (shown below).  When I remove the comment block it infers the type properly:
const ChevronRight= styled(Icon)`
  margin-right: 3px;
  margin-left: 6px;
  transition: margin-left ease-in-out 0.25s, margin-right ease-in-out 0.25s;
  /* ${Button}:hover & {
    margin-left: 9px;
    margin-right: 0;
          Button is declared earlier in the file as 'export const Button = ...'
The commented out block causes an error in Styled-Components + TS, issue referenced here:
styled-components/vscode-styled-components#117