Ma question :

J'essaie d'ajouter mes propres styles au composant fourni par React-native-popup-menu et de l'ajouter à ma bibliothèque de composants. Ils fournissent les composants Menu, MenuOptions et MenuOption avec la hiérarchie attendue suivante :

<Menu>
  <MenuOptions>
    <MenuOption text="A">
    </MenuOption>
    <MenuOption text="B">
    </MenuOption>
  </MenuOptions>
</Menu>

Je prévois de créer un wrapper pour chaque élément, de styliser le composant qu'il contient et de renvoyer le wrapper lorsque quelqu'un l'importe depuis la bibliothèque de composants.

Par exemple, un wrapper pour le composant menu :

import { MenuProps } from 'react-native-popup-menu';

type CustomMenuProps = {
  children: React.ReactElement[];
}

const CustomMenu = (props: MenuProps && CustomMenuProps) => {
  return <Menu style={{...someCustomStyle}}>{children}</Menu>
}

Cela ajoute un wrapper (un élément supplémentaire) sur chaque calque, ce qui donne la hiérarchie suivante :

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>...

Le package n'aime pas ça car il s'appuie sur la hiérarchie pour afficher correctement le menu. Génère l'erreur "MenuOptions devrait être un enfant de Menu"

Existe-t-il un moyen de créer un menu de style personnalisé et de l'exposer en tant que composant dans la bibliothèque de composants ? Si c'était React, je réécrirais la classe CSS, mais il n'y a pas d'effet en cascade dans React-Native.

Tout indice serait très utile. Merci.