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

mediaquery not working in defineVars on real devices

Đang mở
#283 4 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
32/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react-native
Lĩnh vực
mobile-dev

Hướng nghiên cứu

Bắt đầu với các ví dụ tokens.stylex.tsheader.ts, sau đó kiểm tra đường dẫn css.defineVars cho các media query liên quan đến kích thước trong đầu ra native. Tái hiện trên một thiết bị Android hoặc iOS thực bằng RN 0.78 và RSD 0.0.34, so sánh với trình giả lập và trường hợp color-scheme. Hoàn tất khi giá trị token mặc định được áp dụng trên các thiết bị thực, trong khi media query về kích thước vẫn được hỗ trợ.

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

Mô tả

bug
Describe the issue

Bit of a long shot and not sure how to easily reproduce (let me know if I can use some predefined "snack" or codeSandbox to reproduce, but would be tricky as it needs to be checked specifically on a real device). But basically I encountered this strange behavior:

when a css.defineVars variable is defined using screen size media queries, its value works correctly on emulators, but not on real devices where it is completely ignored (style is not passed at all).

Everything works fine on emulator and on web css output.

Expected behavior

the default value of the token should be used on a real mobile device

Steps to reproduce

RN version 0.78
RSD: 0.0.34
(not using expo, but own App bundled with metro and babel/postss config as per documentation)
Issue seems consistent on both Android and iOS devices

Something like:

// tokens.stylex.ts
export const tokens = css.defineVars({
  myFontSize: { default: "1rem", "@media (min-width: 1024px)": "2rem" }
});
//header.ts
import { tokens } from "./tokens.stylex";

export const Header = () => <h.span style={styles.base}>Header</h.span>;

const styles = css.create({
  base: { fontSize: tokens.myFontSize }
});
Test case

No response

Additional comments

if I use a an unrelated color scheme mediaquery:

// tokens.stylex.ts
export const tokens = css.defineVars({
  myFontSize: { default: "1rem", "@media (prefers-color-scheme: dark)": "2rem" }
});

everything seems to work correctly, so maybe the issue seems limited to the parsing or application of size related media queries

The issue seems specific to css.defineVars on the stylex file, it works as expected with styles made using css.create

Ngôn ngữ chính
JavaScript
Star
3.6k
Fork
206
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

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 react/react-strict-dom

Tất cả issue của react/react-strict-dom

Issue tương tự

Thêm issue về JavaScript

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.