Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

TypeScript hangs when styled() wraps components with complex ref props

Đang mở
  • Có gì không ổn?
#343 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 3 ngày

@emmanuelchucks đang làm issue này rồi.

Từ ngày 24/5/2026.

  • #344 của @emmanuelchucks — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react-native, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start from the StyledConfiguration type, which applies DotNotation to ComponentProps<C>, and check how the recursion reaches the ref prop. Run npm run typecheck in the linked repro repository to confirm the hang. Pull request #344 already proposes using PropsWithoutRef for style-target inference, so review it first. Done means the repro typechecks quickly while ref stays on the styled component's props.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

auto-triaged bug confirmed deferred (post-5.0)
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

styled() can cause TypeScript to hang when wrapping components whose props include complex ref types, such as react-strict-dom elements.

Minimal example:

import { html } from "react-strict-dom";
import { styled } from "react-native-css";

export const StyledDiv = styled(html.div, { className: "style" });

export const element = <StyledDiv className="p-4" />;
What I found

The issue appears to come from StyledConfiguration computing dot-notation style targets from:

DotNotation<ComponentProps<C>>

For html.div, ComponentProps<C> includes:

ref?: React.Ref<HTMLDivElement>

DotNotation then recursively walks into the ref type, then into HTMLDivElement, which expands into a large recursive DOM type graph.

I verified locally that:

  • ComponentProps<typeof html.div> typechecks quickly.
  • DotNotation<Pick<Props, "style">> typechecks quickly.
  • DotNotation<Pick<Props, "ref">> hangs.
  • styled(html.div, { className: "style" }) hangs before the fix.
Library version

3.0.7

Environment info
Node: 24.13.0
TypeScript: 5.9.2
react-native-css: 3.0.7
react-strict-dom: 0.0.55
react: 19.1.0
react-native: 0.81.4
Steps to reproduce
  1. Clone the repro repository.
  2. Install dependencies.
  3. Run npm run typecheck.
Reproducible example repository

https://github.com/emmanuelchucks/react-native-css-styled-rsd-ref-repro

Possible fix

Using PropsWithoutRef<ComponentProps<C>> for style-mapping target inference avoids walking ref, while still preserving ref on the returned styled component props.

Conceptually:

DotNotation<PropsWithoutRef<ComponentProps<C>>>

instead of:

DotNotation<ComponentProps<C>>
Ngôn ngữ chính
TypeScript
Star
166
Fork
45
Merge trung bình
13 ngày 14 giờ
Pull request đã merge (30 ngày)
1

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nativewind/react-native-css

Tất cả issue của nativewind/react-native-css

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.