React-Leaflet Popupをカスタムコンポーネントに置き換えるにはどうすればいいですか？

Question

私はReact-Leafletと（callemall）Material-UIをプロジェクトで使用しています。 React-Leafletの<Popup></Popup>コンポーネント内にMaterial-UI Cardコンポーネントをレンダリングしようとしています。私はコンポーネントとしてポップアップにプルしようとしましたが、ポップアップはコンポーネントが正常に動作するようにしません。具体的には、カードコンポーネントにはボタン要素が展開されていますが、残念ながらポップアップではクリックできません。私はオーバーライドする必要があるいくつかCSS-yのものがあると確信していますが、私の考えは、ポップアップコンポーネントを自分のコンポーネントに置き換える方が簡単なオプションだと思いますが、その方法についてはわかりません。任意の洞察力ははるかに高く評価される:)

私のコードは次のようになります。

<Marker position={position}> 
    <Popup> 
     <MapPopup /> 
    </Popup> 
</Marker> 

、輸入部品は、次のようになります（私は読んで、それを簡単にするためにスタイルや重要でない内容を削除しました）

<Card> 
    <CardHeader /> 
     <CardMedia 
      expandable={true} 
      overlay={ 
       <CardText expandable={true}> 
        <div> 
         <p>Text</p> 
         <Chip>text</Chip> 
        </div> 
        <div> 
         <p>Text</p> 
         <Chip>Text</Chip> 
        </div> 
       </CardText> 
      }> 
     <img src="cardMediaImageURL" /> 
    </CardMedia> 
</Card> 

Answer 1

React-Leaflet and Leafletはポップアップのために静的なHTMLをレンダリングするため、その中に動的なコンテンツを表示することはできません。マテリアルUIコンポーネントのレンダリングは可能ですが、インタラクティブではありません。これを実現するには、コンポーネントを<MuiThemeProvider></MuiThemeProvider>でラップします。あなたは、コンテンツが完全なビューに設定されていることを確認してください。エクスパンダのようなものではありません。次のように

ソリューションは、次のとおりです。

<Popup> 
    <MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}> 
     <YourCustomComponent /> 
    </MuiThemeProvider> 
</Popup>