mediaquery not working in defineVars on real devices
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.ts và header.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ả
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
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của react/react-strict-dom
-
bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 65/100
react/react-strict-dom#467 · 1 bình luận ·
-
Missing disabled prop Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
react/react-strict-dom#465 · 2 bình luận ·
-
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 35/100
react/react-strict-dom#520 ·
-
css.defineVars() with kebab-case keys warns unrecognized custom property and fails to resolve Đang mởbug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 35/100
react/react-strict-dom#505 · 2 reaction ·
-
bug
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 62/100
react/react-strict-dom#491 · 4 bình luận ·
Tất cả issue của react/react-strict-dom
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
mksglu/context-mode#1200 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
neondatabase/website#5944 ·
-
module: core
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
bigbluebutton/bigbluebutton#25849 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
jaegertracing/jaeger-ui#4506 ·