callstack / callstack/react-native-paper

Nested Text components do not inherit style

Đang mở
#4,351 1 bình luận 2 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour
When nesting `Text` components, the child component does not inherit the style of the parent element.

### Expected behaviour
I would expect the styles to be inherited and overridden by the child component instead of simply overridden. The Text component from react-native exhibits this behavior.

### How to reproduce?
Nest a Text component inside another Text component and apply styles to both (e.g., color on one and fontWeight on the other). Note the nested component ignores the styles set on the parent component.

https://snack.expo.dev/lfm3PI-XWFR_YP56qwbn7

### Preview
![image](https://github.com/callstack/react-native-paper/assets/29152776/bc1d88c0-69de-4651-9014-112f03ef1f9a)

### What have you tried so far?
Replacing the nested Text element with the react-native version (instead of RNP) fixes the inheritance, but you lose the default styles from RNP that you may wish to preserve (e.g., if the nested Text is a different variant from the parent, you need to manually apply all of the variant styles to the nested element).

### Your Environment

| software | version
| --------------------- | -------
| ios | 17.2
| android | 30
| react-native | 0.73.2
| react-native-paper | 4.9.2
| node | 18.17.1
| yarn | 1.22.19
| expo sdk | 50.0.0

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

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

Hướng nghiên cứu

Bắt đầu với Expo Snack được liên kết và phần triển khai component Text; tái tạo các component Text lồng nhau với các style của phần tử cha và con như color và fontWeight. So sánh hành vi với component Text của React Native. Hoàn thành khi Text con giữ lại các style có thể kế thừa từ phần tử cha, đồng thời cho phép các style và biến thể riêng của nó ghi đè chúng.

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

Đánh giá

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

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.