callstack / callstack/react-native-paper

Nested Text components do not inherit style

Ouverte
#4,351 1 commentaire 2 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’Expo Snack lié et l’implémentation du composant Text ; reproduisez des composants Text imbriqués avec des styles du parent et de l’enfant tels que color et fontWeight. Comparez le comportement avec le composant Text de React Native. La tâche est terminée lorsque le Text enfant conserve les styles héritables du parent tout en permettant à ses propres styles et variantes de les remplacer.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.